react-easy-auth

A React component that easily adds social authentication with firebase to your projects.

Install

npm install --save react-easy-auth

Configuration

1. Use an existing firebase project or create a new one. Then enable your preferred sign-in method from the firebase console. For help visit: https://firebase.google.com/docs/web/setup
2. Paste your firebase configuration in a .env file inside your React project:

REACT_APP_APIKEY="api-key"
REACT_APP_AUTHDOMAIN="project-id.firebaseapp.com"
REACT_APP_DATABASEURL="https://project-id.firebaseio.com"
REACT_APP_PROJECTID="project-id"
REACT_APP_STORAGEBUCKET="project-id.appspot.com"
REACT_APP_MESSAGINGSENDERID="sender-id"
REACT_APP_APPID="app-id"

Usage

import React, { useState } from 'react'

import { SocialSignIn, SocialSignOut } from 'react-easy-auth'

export const App = () => {
  const [user, setUser] = useState(null)

  //a method to fetch user data from the SocialSignIn component
  const fetchUserData = (userData, userCredentials, error) => {
    if (!error) {
      setUser(userData)
    }
  }

  // a method to handle sign-out 
  const onSignOut = (error) => {
    if (!error) {
      console.log('signed out')
      setUser(null)
    }
  }

// if the user data is present we show the SocialSignOut Compononent
  if (user) {
    return (
      <div>
        <h1> Welcome {user.displayName} </h1>
        <SocialSignOut style={{ color: 'red' }} onSignOut={onSignOut} />
      </div>
    )
  }

// if there is no user data we show the SocialSignIn Component
  return (
        <SocialSignIn
          authProvider='Google'
          style={{ color: 'white', backgroundColor: 'red', fontSize: '20px', borderRadius: '5px' }}
          fetchUserData={fetchUserData}
        />
  )
}

API

SocialSignIn

authProvider

| Type | Required |
| :------------- | :----------: | | string | Yes |

This prop is used to describe what authentication provider needs to be activated. Make sure to also enable the same from firebase console. The available providers are:

• Google
• Twitter
• Facebook
• Github
• Microsoft

fetchUserData()

| Type | Parameters | Required |
| :------------- | :------------------------------------: | :----------: | | function | userData, userCredentials, error | Yes |

This function is used as a prop to fetch the data from the SignIn Component whenever a user signs in.

• userData (Object): The user related data.
• userCredentials (Object): The user credentials like access tokens
• error (Object): Error generated during the authentication flow

style

| Type | Required |
| :------------- | :---------------: | | object | Optional |

This prop is used to add styling to the SocialSignIn button using inline CSS. You can add your preffered styling to the button to give it a custom appeal.

scopes

| Type | Required |
| :------------- | :---------------: | | array | Optional |

This prop is used to specify additional OAuth 2.0 scopes that you want to request from the. authentication provider.

SocialSignOut

onSignOut()

| Type | Parameters | Required |
| :------------- | :----------: | :----------: | | function | error | Yes |

This function is used as a prop to activate the sign out method. If any error occurs during the process it is returned through the error object.

• error (Object): Error generated during the sign out flow

style

| Type | Required |
| :------------- | :---------------: | | object | Optional |

This prop is used to add styling to the SocialSignOut button using inline CSS. You can add your preffered styling to the button to give it a custom appeal.

Contributing

See contributing guidlines here

License

MIT © chiragsrvstv