Firebase + Google Sign in CTA & Functionality

signin-component.js

/* globals window */
import React, { useEffect, useState } from 'react'
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth'
import firebase from 'firebase/app'
import 'firebase/auth'
import initFirebase from '../global/auth/initFirebase'
import { setUserCookie } from '../global/auth/userCookies'
import { mapUserData } from '../global/auth/mapUserData'

// Init the Firebase app.
initFirebase()

const firebaseAuthConfig = {
  callbacks: {
    signInSuccessWithAuthResult: async ({ user }, _) => {
      const userData = mapUserData(user)
      setUserCookie(userData)
    },
  },
  credentialHelper: 'none',
  signInFlow: 'popup',
  // Auth providers
  // https://github.com/firebase/firebaseui-web#configure-oauth-providers
  signInOptions: [firebase.auth.GoogleAuthProvider.PROVIDER_ID],
  signInSuccessUrl: '/',
}

const FirebaseAuth = () => {
  // Do not SSR FirebaseUI, because it is not supported.
  // https://github.com/firebase/firebaseui-web/issues/213
  const [renderAuth, setRenderAuth] = useState(false)

  useEffect(() => {
    if (typeof window !== 'undefined') {
      setRenderAuth(true)
    }
  }, [])

  renderAuth ? return (
    <StyledFirebaseAuth
      uiConfig={firebaseAuthConfig}
      firebaseAuth={firebase.auth()}
    />
  ) : return null
}

export default FirebaseAuth