react-easy-auth v1.0.2

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

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()

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

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

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

SocialSignOut

onSignOut()

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

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