https://github.com/rakannimer/react-firebase-auth-provider

Simple authentication with React & Firebase
https://github.com/rakannimer/react-firebase-auth-provider

Last synced: 12 days ago
JSON representation

Simple authentication with React & Firebase

• Host: GitHub
• URL: https://github.com/rakannimer/react-firebase-auth-provider
• Owner: rakannimer
• Created: 2018-08-13T13:34:29.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-09-03T09:34:25.000Z (over 6 years ago)
• Last Synced: 2024-12-16T22:13:42.720Z (2 months ago)
• Language: JavaScript
• Size: 92.8 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Docs moved to : https://react-firebase-js.com/docs/react-firebase-auth/getting-started

## Source code moved to : https://github.com/rakannimer/react-firebase/

# React Firebase Auth

Easily integrate Firebase Authentication in your react(-native) app.

React Firebase Auth exports the following components :

- FirebaseAuthProvider

- FirebaseAuthConsumer

- IfFirebaseAuthed

- IfFirebaseAuthedAnd

- IfFirebaseUnAuthed

### Usage

Change PROJECT_NAME to your project name and grab your firebase config here :

https://console.firebase.google.com/project/PROJECT_NAME/settings/general/

```javascript

// Firebase Config

const config = {

  apiKey: "API_KEY",

  authDomain: "AUTH_DOMAIN",

  projectId: "PROJECT_ID",

  // OPTIONAL

  databaseURL: "DATABASE_URL",

  storageBucket: "STORAGE_BUCKET",

  messagingSenderId: "MESSAGING_SENDER_ID"

};

```

Place an AuthProvider Component anywhere in your component tree as an ancestor to any of the other react-firebase-auth-provider components and pass to it your firebase config.

```javascript

import firebase from "firebase/app";

import "firebase/auth";

import {

  FirebaseAuthProvider,

  IfFirebaseUnAuthed,

  IfFirebaseAuthed,

  FirebaseAuthConsumer,

  IfFirebaseAuthedAnd

} from "react-firebase-auth-provider";

const config = {

  apiKey: "API_KEY",

  authDomain: "AUTH_DOMAIN",

  projectId: "PROJECT_ID",

  // OPTIONAL

  databaseURL: "DATABASE_URL",

  storageBucket: "STORAGE_BUCKET",

  messagingSenderId: "MESSAGING_SENDER_ID"

};

const MyApp = () => {

  return (

    

      


         {

            const googleAuthProvider = new firebase.auth.GoogleAuthProvider();

            firebase.auth().signInWithPopup(googleAuthProvider);

          }}

        >

          Sign In with Google

        

         {

            firebase.auth().signInAnonymously();

          }}

        >

          Sign In Anonymously

        

         {

            firebase.auth().signOut();

          }}

        >

          Sign Out

        

        

          {({ isSignedIn, user, providerId }) => {

            return (

              

                {JSON.stringify({ isSignedIn, user, providerId }, null, 2)}

              

            );

          }}

        

        


          

            {() => {

              return 
You are authenticated
;

            }}

          

           providerId !== "anonymous"}

          >

            {({ providerId }) => {

              return 
You are authenticated with {providerId}
;

            }}

          

        

      

    

  );

};

```


## [Reference](https://firebase.google.com/docs/auth/)