# fb-crazy-auth

> Une simple librairie pour vous permettre de rapidement mettre en place l'authentification avec firebase .

Latest version **0.1.1** (published 2024-03-30) · 0 weekly downloads

## Install

```sh
npm install fb-crazy-auth
pnpm add fb-crazy-auth
yarn add fb-crazy-auth
bun add fb-crazy-auth
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2024-03-30 |
| First published | 2024-03-30 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 15 |
| Unpacked size | 17.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | deme-3 |

## Links

- npm: https://www.npmjs.com/package/fb-crazy-auth
- npm.io page: https://npm.io/package/fb-crazy-auth

## Dependencies (15)

- [react](https://npm.io/package/react.md) ^18.2.0
- [firebase](https://npm.io/package/firebase.md) ^10.10.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
- [web-vitals](https://npm.io/package/web-vitals.md) ^2.1.4
- [fb-easy-auth](https://npm.io/package/fb-easy-auth.md) ^0.1.0
- [fb-crazy-auth](https://npm.io/package/fb-crazy-auth.md) ^0.1.0
- [react-scripts](https://npm.io/package/react-scripts.md) 5.0.1
- [unstated-next](https://npm.io/package/unstated-next.md) ^1.1.0
- [fb-simple-auth](https://npm.io/package/fb-simple-auth.md) ^0.1.0
- [fb-firebase-auth](https://npm.io/package/fb-firebase-auth.md) ^0.1.0
- [react-router-dom](https://npm.io/package/react-router-dom.md) ^6.22.3
- [@testing-library/react](https://npm.io/package/@testing-library/react.md) ^13.4.0
- [fb-simple-auth-provider](https://npm.io/package/fb-simple-auth-provider.md) ^0.1.0
- [@testing-library/jest-dom](https://npm.io/package/@testing-library/jest-dom.md) ^5.17.0
- [@testing-library/user-event](https://npm.io/package/@testing-library/user-event.md) ^13.5.0

## Recent versions

- 0.1.1 (latest) — 2024-03-30
- 0.1.0 — 2024-03-30

## README

# Authentification facile avec firebase
Une simple librairie pour vous permettre de rapidement mettre en place l'authentification avec firebase . 

## Installation 

    npm i fb-crazy-auth
    
## Configuration

Commencer par installez firebase  `npm install firebase`
et créer un projet [firebase](https://console.firebase.google.com/) 

Activez l'authentification par Email et mot de passe ainsi que Google et Facebook si vous souhaitez les utiliser 

## Les composant 

    import { initAuthService, SignIn, SignUp, ResetPassword } from 'fb-crazy-auth';

## Exemple

### Démarrer firebase :

 

    import { initializeApp } from 'firebase/app';
    import { getAuth } from 'firebase/auth';
    
    // Votre configuration Firebase
    const firebaseConfig = {
      apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
      authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
      projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
      storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
      appId: process.env.REACT_APP_FIREBASE_APP_ID
    };
    
    // Initialiser l'application Firebase
    const app = initializeApp(firebaseConfig);
    
    // Accéder à l'instance Auth pour l'application Firebase
    const auth = getAuth(app);
    
    export { auth };

	
	
### Connexion 
App.js

    import React from 'react';
    import {auth} from './YOUR_FIREBASE_CONFIG_FILE.js'
    import { initAuthService, SignIn, SignUp, ResetPassword } from 'fb-crazy-auth';
    
    
    function App() {
    
      initAuthService(auth);
    
      return (
        <>
        <SignIn 
        authEnabled={true}
        
		onSignInSuccess={()=>alert('je suis connecté)}
		
		onSignInFail={()=>alert('oups, problème')}
		
		customLoader={<p>Chargement...</p>}
		
		terms={{ 
		signInButton: "Se Connecter", 
		emailLabel: "Adresse Email", 
		passwordLabel: "Mot de Passe" }} 
		 																              			 	
		style={{ 
		button: { backgroundColor: "green", color: "white" }, 
		input: { borderColor: "lightgray" }, 
		label: { fontWeight: "normal" } }}

      </>
      )
    }
    
    export default App;

	
### Création de compte
App.js

    import React from 'react';
    import {auth} from './YOUR_FIREBASE_CONFIG_FILE.js'
    import { initAuthService, SignIn, SignUp, ResetPassword } from 'fb-crazy-auth';
    
    
    function App() {
    
      initAuthService(auth);
    
      return (
        <>
        <SignUp
        authEnabled={true}
        
		onSignInSuccess={()=>alert('je suis connecté)}
		
		onSignInFail={()=>alert('oups, problème')}
		
		customLoader={<p>Chargement...</p>}
		
		terms={{ 
		signInButton: "Créer un compte", 
		emailLabel: "Adresse Email", 
		passwordLabel: "Mot de Passe" }} 
		 																              			 	
		style={{ 
		button: { backgroundColor: "green", color: "white" }, 
		input: { borderColor: "lightgray" }, 
		label: { fontWeight: "normal" } }}

      </>
      )
    }
    
    export default App;
 
### Reset mot de passe
App.js

    import React from 'react';
    import {auth} from './YOUR_FIREBASE_CONFIG_FILE.js'
    import { initAuthService, SignIn, SignUp, ResetPassword } from 'fb-crazy-auth';
    
    
    function App() {
    
      initAuthService(auth);
    
      return (
        <>
        <ResetPassword />
        
      </>
      )
    }
    
    export default App;


## Classes
| className | description |
|--|--|
| fb-auth-signinForm | classe pour le formulaire de connexion |
| fb-auth-signupForm | classe pour formulaire d'inscription |
| fb-auth-socials | Conteneur connexion google && facebook  |

---
_Source: https://npm.io/package/fb-crazy-auth · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._