programming

Firebase Google Authentication In A React JS Chrome Extension

By June 15, 2018 No Comments

Recently I was working on a chrome extension using ReactJs. Everything was going fine. Coded all core features except Firebase connection just to store those data and sync with all devices. I never thought about Firebase authentication issue. For a noob like me it was a huge pain. So after researching for sometimes, I finally figured out how to make it work. So in this article I’m gonna share..

By the way, I hope you already know how to create a simple extension using React. I’m just gonna write about how to make the authentication work.

If you don’t know how to customise your react project to make it work like an extension, then please follow the following article by Mackenzie Higa

Article Link :  https://engineering.musefind.com/how-to-build-a-chrome-extension-with-react-js-e2bae31747fc

Now let’s start..

Uploading And Getting The App ID Of Your Extension

Screen Shot 2018-06-16 at 3.03.28 AM

  • Build your React project using “yarn build” command.
  • Then go to your react project folder and compress your build folder.
  • In Chrome App Developer Dashboard click on Add New Item button. Then upload your zip file.
  • After successful upload, Go back to your dashboard. From listings section click on “More Info” option on your item.
  • There you’ll find the Item Id and Public Key for your app.

Creating An Oauth Client In Your Google Developer Console

  • Go to your Google Developer Console. Choose your firebase project. Then create your OAuth Client ID by choosing application type as Chrome AppScreen Shot 2018-06-16 at 3.06.10 AM
  • They you’ll get your Client ID in a popup window or in some dashboard. Just Copy it. We gonna use it in the next section.

Configuring Project With Client ID

  • Go to your Firebase Console > Authentication > Sign-in Method > Google. Now you’ll see a “Whitelist client IDs from external projects (optional)” option. Paste your client id in the textfield and click on the add button.
  • Go to your manifest file in react project and add the following.
"oauth2": {
"client_id": REPLACE_IT_WITH_YOUR_CLIENT_ID,
 "scopes": [
  "https://www.googleapis.com/auth/userinfo.email",
  "https://www.googleapis.com/auth/userinfo.profile"
 ]
},
"permissions": [
  "identity"
],
“content_security_policy”:”script-src ‘self’ https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src ‘self'”,
"key": REPLACE_IT_WITH_YOUR_PUBLIC_KEY
  • I hope you have initialised Firebase in your project. If not, Add Firebase NPM package in your project, then add the following code according to your values before doing any type of firebase operations.
var config = {
   apiKey: "<api-key>",
   databaseURL: "https://<my-app-id>.firebaseio.com",
   storageBucket: "<my-app-id>.appspot.com"
};
Firebase.initializeApp(config);
  • Firebase is imported from ” import Firebase from ‘firebase’ ”  on beginning of the component.
  • Now to authenticate we’ll use Chrome’s identity api to get the OAuth token and then authenticate using it through Firebase.
  • To do that add the following line on top of your component, in which you are going to use the chrome identity api.
    /*global chrome*/
  • No inside your login function, use the following code
chrome.identity.getAuthToken({ interactive: true }, accessToken => {
 
 console.log('Token:', accessToken); 
 letcredential=Firebase.auth.GoogleAuthProvider.credential(null, accessToken);

 Firebase.auth().signInAndRetrieveDataWithCredential(credential).then(result=> {
 console.log('Yusss:', result);
 }).catch(error => {
 console.error('Oh Shiit:', JSON.stringify(error)); 
 });

});

Now I guess we are ready. Call this function when the login button is pressed and it’ll work.

If something goes wrong, you can comment here or tweet me at @buckydroid

Happy Coding X)

BuckyDroid

BuckyDroid

Struggling App Developer..

Leave a Reply