Sign in with Google or Github using Firebase (signInWithPopUp)

Working on: Tweeter (Twitter Clone App)

Form:

Using Firebase, we can sign in with Firebase’s signInWithPopUp() which takes an OAuth provider as a parameter. signInWithPopUp authenticates a Firebase client using pop-up based OAuth authentication flow — if successful, it returns the signed in user along with the provider’s credentials. If not, it will return an object containing the error message. (Definition retrieved from Firebase Documentation).

To use signInWithPopUp we first have to create a provider.

To be able to create a provider we have to access firebase.auth. On my firebase.js file:

import firebase from "firebase/app";
import "firebase/auth";
const firebaseConfig = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_ID,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_APP_ID,
};

firebase.initializeApp(firebaseConfig);
//Above code is for initialization of firebase into my application
export const firebaseAuthorization = firebase.auth();
export const firebaseProviders = firebase.auth;

Then we can import firebaseProviders to Auth.js (Which contains the sign in form).

import { firebaseAuthorization, firebaseProviders } from "../firebase";

and on my form, I have two buttons for signing in with either Google or Github.

<button onClick={socialLogIn} name="google">
Continue with
<i className="fab fa-google"></i>
</button>
<button onClick={socialLogIn} name="github">
Continue with
<i className="fab fa-github"></i>
</button>

As you can see on the code above, I have an onClick event handler called socialLogIn which basically executes the sign in process using either Google sign in or Github sign in.

socialLogIn

First of all, we need a way to differentiate between which button the user is selecting — Google or Github? To differentiate between the two, we can retrieve the selected button’s name by using event.target.name and using conditionals. Below, I used the ES6 shorthand for retrieving the name.

const socialLogIn = async (e) => {
const {
target: { name },
} = e;
let provider;
if(name === "google){
// create google provider
} else if (name === "github){
//create github provider
}
};

Next, let’s create the provider for each button by accessing the previously imported firebaseProviders (which is firebase.auth).

For Google:

if (name === "google") {
provider = new firebaseProviders.GoogleAuthProvider();

For Github:

else if (name === "github") {
provider = new firebaseProviders.GithubAuthProvider();
}

Next, we can finally use signInWithPopUp which, if successful, returns the signed in user and the provider’s credentials.

Note: we have to use async-await since signInWithPopUp returns a promise with the user’s credentials.

await firebaseAuthorization.signInWithPopup(provider);

And you are all set! If sign in was successful, you will have an object containing the signed in user’s credentials.

socialLogin function code:

const socialLogIn = async (e) => {
const {
target: { name },
} = e;
let provider;
if (name === "google") {
provider = new firebaseProviders.GoogleAuthProvider();
} else if (name === "github") {
provider = new firebaseProviders.GithubAuthProvider();
}
await firebaseAuthorization.signInWithPopup(provider);
};

Demo

So if we click on “Continue with G” on our form — we will get a Gmail pop up:

Once we select our account and it successfully signs us in, we will get the user’s credentials (It would depend on you on what you would want to do with the returned object containing the signed in user’s credentials)

And once we check our app’s Firebase authentication console:

We can see that the provider used to sign in was Google and the user is now added to our app’s users list on Firebase!