umma.dev

Firebase and Authentication

Are you looking to implement Google into your authentication? Firebase allows you to implement Google sign in through a few easy steps. Below the code is primarily for a ReactJS application however the platform supports many other programming languages.

Once you have signed up and created a project on Firebase, you will need to install the following packages.

npm install --save firebase react-with-firebase-auth

You will then need to set up a firebaseConfig file in the root. You can find the details for this config file by going to YourFirebaseProject > Settings > Project Settings > Your Apps > Config (from the Firebase SKD pane)

\\firebaseConfig.js

const config = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
}
export default config;

Add the following code into your component.

\\ExampleComponent.js

import withFirebaseAuth from 'react-with-firebase-auth'
import * as firebase from 'firebase/app';
import 'firebase/auth';
import firebaseConfig from './firebaseConfig';

const firebaseApp = firebase.initializeApp(firebaseConfig);

const firebaseAppAuth = firebaseApp.auth();
const providers = {
  googleProvider: new firebase.auth.GoogleAuthProvider(),
};

class YourComponentName extends Component{
    render(){
        const { user, signOut, signInWithGoogle } = this.props;
        return(
            <div>
                <Button onClick={signInWithGoogle}>Sign in with
            </div>

        )
    }
}

export default withFirebaseAuth({
    providers,
    firebaseAppAuth,
  })(YourComponentName);