Implement Social media SignUp/Login in React JS using firebase pre-built UI.

Firebase pre-built UI is a great way to get yourself free to implement the social media authentication in your web applications.You can implement any social media authentication using that like Twitter,Facebook,Google,Github,Linkedin etc.Only thing that you need to require is that you must have enabled the particular/specific authentications in your firebase console authentication section.

So lets get started.

First go to your firebase console and create a project. https://console.firebase.google.com/

Then go to the authentication section and enable the authentication method by providing the client id and client secret if required.By default google dosent require this but all other auth require this you can get that by going to the developer sites of the authentication providers.

For example,we will be using facebook and github you can use any you like.

1. So for taking the client id and client secret just go to https://developers.facebook.com/

1. Go to your apps and then if you have not created an app create it.https://developers.facebook.com/apps/.

1. After creating an app click on it to go the dashboard and then go to settings basic from the left side bar.There you can find the client Id and client secret just copy them one by one.

1. Paste the client Id and client secret from app setting to the firebase console and enable the authentication and save to close the pop up.

1. You will see that your facebook authentication was successfully enabled after doing that successfully.

Now for Getting the Github client id and client secret just go to your github account and click on your photo to go to settings.

Then go to the developer settings.Click on OAuth apps.You will be right here.You can simply go this site at this url https://github.com/settings/developers

Now just create a new auth app by clicking the button New Oauth App if you havent already created.Provide the information.

Copy the call back url from your firebase developer consoles auth section at github.You can also study that here https://docs.github.com/en/developers/apps/creating-an-oauth-app

Congratulations Uptil Now you have successfully enabled the facebook and github authentications in your firebase apps.

Now its time to install the packages for our react project if you have not created a react project.Create it with the below command in your terminal.

npx create-react-app socialmediaauth

navigate to your project directry after creating the app by typing following command in your terminal.

 cd socialmediaauth

Now install firebase prebuilt ui with the following command.

npm install --save react-firebaseui

Now just you need to install the firebase package.

npm i firebase

Or if you want using yarn

yarn add firebase

Now just create another file in the src folder of your project name firebase.js.

Paste the following code in it to initialize your firebase web app.

<script src=”https://gist.github.com/Muhammad-Bilal-7896/375f24c068d99dfb30e5f1e445375eac.js"></script>

Import firebase from firebase/index.js file.

import firebase from ‘../firebase/index.js’;

Also Import StyledFirebaseAuth from react-firebase ‘react-firebaseui/StyledFirebaseAuth’ as below

import StyledFirebaseAuth from ‘react-firebaseui/StyledFirebaseAuth’;

In the componentDidMount method you can simply check if your user is signed in previously or not.

firebase.auth().onAuthStateChanged(user => {
//This will run if user is previously signed in
this.setState({ isSignedIn: !!user })
// console.log(“user”, user)
if (this.state.isSignedIn == true) {
////////////////////////////
let today = new Date();
let date = today.getFullYear() + ‘-’ + (today.getMonth() + 1) + ‘-’ + today.getDate();
let time = today.getHours() + “:” + today.getMinutes() + “:” + today.getSeconds();
let dateTime = date + ‘ ‘ + time;
dateTime = dateTime.toString();
//////////////////////////////
let userdata = {
name: firebase.auth().currentUser.displayName,
email: firebase.auth().currentUser.email,
photo: firebase.auth().currentUser.photoURL,
uid: firebase.auth().currentUser.uid,
isSignedIn: this.state.isSignedIn,
LoginTime: dateTime
}
this.setState({
user_data: userdata
})
// console.log(“Simple User===>”,this.state.user_data);
}
else {
// console.log(“Sign In to continue”);
}
})

Now just use the imported StyledFirebaseAuth component in your code to get it working.

<div>
<StyledFirebaseAuth
uiConfig={this.uiConfig}
firebaseAuth={firebase.auth()} 
/>
</div>

Simple make a variable called uiconfig which will create a user interface configuration.Your code will look like this you can add as many auth as needed.Its just an example.

uiConfig = {
signInFlow: “popup”,
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID,
firebase.auth.GithubAuthProvider.PROVIDER_ID,
firebase.auth.EmailAuthProvider.PROVIDER_ID
],
callbacks: {
signInSuccessWithAuthResult: () => false
}
}

You can alternatively paste this code simply to get working the login/signup process.

<script src=”https://gist.github.com/Muhammad-Bilal-7896/f1be3716dc43cb9f3dd0d8e8d0f724e8.js"></script>

You will see this

After successful sign in

Congratulations you have successfully done the firebase prebuilt ui and auth in just a few steps.This is it.

And Run npm start to see your project.Running.Please do enable email auth too to get it working.Thanks.