Skip to content

Instantly share code, notes, and snippets.

@echohtp
Created June 3, 2020 20:27
Show Gist options
  • Save echohtp/a1b6faf94c5ca01860f76aba0b29d8b4 to your computer and use it in GitHub Desktop.
Save echohtp/a1b6faf94c5ca01860f76aba0b29d8b4 to your computer and use it in GitHub Desktop.
Easy React.JS Boilerplate with Auth from Google Cloud Platform
import React, { Component } from 'react';
import withFirebaseAuth from 'react-with-firebase-auth'
import * as firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/firestore';
import ProtectedApp from './components/ProtectedApp'
const firebaseConfig = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_DATABASE_URL,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_APP_ID,
measurementId: process.env.REACT_APP_MEASUREMENT_ID
};
export default firebaseConfig;
const firebaseApp = firebase.initializeApp(firebaseConfig);
const firebaseAppAuth = firebaseApp.auth();
const firebaseAppDB = firebase.database();
const providers = {
googleProvider: new firebase.auth.GoogleAuthProvider(),
twitterProvider: new firebase.auth.TwitterAuthProvider()
};
class App extends Component {
render() {
const { user, signOut, signInWithGoogle, error, loading } = this.props;
return (
<div>
{ error === true ? <p>error: {error}</p> : <div></div>}
{ loading ? <p>Loading</p> : <div></div> }
{
user === null || user === undefined ?
(<div><button onClick={signInWithGoogle}>Signin with google</button></div>)
:
(<ProtectedApp user={user} db={firebaseAppDB} signOut={signOut}/>)
}
</div>
);
}
}
export default withFirebaseAuth({
providers,
firebaseAppAuth,
})(App);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment