How to Add OAuth Login to a React App Without Writing Any Backend Code

What you’ll build in the next 20–30 minutes

• A React login button: Continue with Google

• A secure OAuth flow handled by a hosted provider (no custom backend)

• A protected page that only logged-in users can see

• A dead-simple way to read the current user and sign out

Why OAuth feels painful (and how to skip the pain)

The No-Backend Approach: React + Hosted OAuth (Firebase Auth Example)

Prereqs

• Node 18+, npm or yarn

• A React app (Vite or CRA). Example uses Vite.

# new project (optional)
npm create vite@latest react-oauth -- --template react
cd react-oauth
npm install
npm install firebase

Step-by-Step: Add Google OAuth to React (No Server Required)

1) Create your project & enable Google sign-in

• Create a new project in your auth provider’s console.

• Turn on Google as a sign-in method.

• Create a Web app and copy the configuration snippet (keys like apiKey, authDomain, appId).

• Add your dev URL to authorized domains (e.g., http://localhost:5173).

2) Initialize the SDK in React

// src/firebase.ts
import { initializeApp } from "firebase/app";
import { getAuth, GoogleAuthProvider } from "firebase/auth";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  appId: "YOUR_APP_ID",
};

export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const googleProvider = new GoogleAuthProvider();

3) Add a “Continue with Google” button

// src/Login.tsx
import { auth, googleProvider } from "./firebase";
import { signInWithPopup } from "firebase/auth";

export default function Login() {
  const handleLogin = async () => {
    await signInWithPopup(auth, googleProvider);
    // Provider handles redirect + token exchange for you
  };

  return (
    <button onClick={handleLogin}>
      Continue with Google
    </button>
  );
}

4) Track the user and protect content

// src/App.tsx
import { useEffect, useState } from "react";
import { auth } from "./firebase";
import { onAuthStateChanged, signOut } from "firebase/auth";
import Login from "./Login";

type AppUser = { email?: string } | null;

export default function App() {
  const [user, setUser] = useState<AppUser>(null);

  useEffect(() => {
    const unsub = onAuthStateChanged(auth, (u) => {
      setUser(u ? { email: u.email ?? "" } : null);
    });
    return () => unsub();
  }, []);

  if (!user) return <Login />;

  return (
    <div>
      <p>Signed in as {user.email}</p>
      <button onClick={() => signOut(auth)}>Sign out</button>

      {/* Protected area */}
      <h2>Dashboard</h2>
      <p>Only visible when logged in.</p>
    </div>
  );
}

5) Run it

npm run dev

Fast fixes for common snags

• Redirect domain mismatch → Add your dev and production URLs to the provider’s Authorized domains.

• Popup blocked → Trigger sign-in from a direct user event (like a click).

• Env variables → Move your config to env files before deploying.

• Multiple providers → Enable GitHub/Apple in the console and add a matching provider in code. Same pattern.

What CodeFast adds to this

• Project-based curriculum designed to ship. Short videos. Real outcomes.

• A roadmap that stacks skills in the right order: idea → auth → data → payments → deploy → feedback → iterate.

• A focus on building an online business, not busywork. You’ll build, launch, and learn by shipping.

• Accountability and pacing so you don’t stall out in tutorial hell.

DIY vs Hosted Auth vs Learning the CodeFast Way

Shipping checklist (copy → paste into your README)

FAQs