Google SignIn Authenticate via OAuth with Google SignIn

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.
SignUp for Unlimited PRO Access

OR


*Enrollment provides full access to this course (and updates) for life.

👈 Auth Intro
Auth Context 👉

Google Auth Provider

file_type_js_official lib/firebase.js 
export const googleAuthProvider = new firebase.auth.GoogleAuthProvider();

SignIn Button

file_type_js_official pages/enter.js 
import { auth, googleAuthProvider } from '../lib/firebase';

export default function Enter(props) {
  const user = null;
  const username = null;

  // 1. user signed out <SignInButton />
  // 2. user signed in, but missing username <UsernameForm />
  // 3. user signed in, has username <SignOutButton />
  return (
    <main>
      {user ? 
        !username ? <UsernameForm /> : <SignOutButton /> 
        : 
        <SignInButton />
      }
    </main>
  );
}

// Sign in with Google button
function SignInButton() {
  const signInWithGoogle = async () => {
    await auth.signInWithPopup(googleAuthProvider);
  };

  return (
    <button className="btn-google" onClick={signInWithGoogle}>
      <img src={'/google.png'} /> Sign in with Google
    </button>
  );
}

// Sign out button
function SignOutButton() {
  return <button onClick={() => auth.signOut()}>Sign Out</button>;
}

function UsernameForm() {
  return null;
}

Q&A Chat