To add Google and Apple login to a React app, the cleanest approach is usually:

• Frontend (React): use the provider’s JS SDK / OAuth buttons
• Backend: verify the tokens and create your own app session/JWT
• Do not rely only on frontend login state for security

Recommended libraries

Google

• @react-oauth/google for React
• Or use Google Identity Services directly

Apple

• react-apple-login or a custom OAuth flow
• Apple Sign In often needs a backend exchange/verification step

---

High-level flow

1) Google Login

1. User clicks Google button
2. Google returns an ID token
3. Send token to your backend
4. Backend verifies token with Google public keys / libraries
5. Backend creates your app session

2) Apple Login

1. User clicks Apple button
2. Apple returns an authorization code and/or identity token
3. Send to backend
4. Backend validates token and exchanges code if needed
5. Backend creates your app session

---

React setup examples

Google

Install

npm install @react-oauth/google

Wrap your app

import { GoogleOAuthProvider } from '@react-oauth/google';

export default function App() {
  return (
    <GoogleOAuthProvider clientId="YOUR_GOOGLE_CLIENT_ID">
      <YourRoutes />
    </GoogleOAuthProvider>
  );
}

Login button

import { GoogleLogin } from '@react-oauth/google';

function LoginPage() {
  const handleSuccess = async (credentialResponse) => {
    const token = credentialResponse.credential;

    const res = await fetch('/api/auth/google', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ token }),
    });

    if (res.ok) {
      // logged in
    }
  };

  return <GoogleLogin onSuccess={handleSuccess} onError={() => console.log('Login Failed')} />;
}

---

Apple

Apple Sign In is a bit more involved.

Option 1: Use a package

A common package is:

npm install react-apple-login

Example

import AppleLogin from 'react-apple-login';

function LoginPage() {
  const responseApple = async (response) => {
    const res = await fetch('/api/auth/apple', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(response),
    });

    if (res.ok) {
      // logged in
    }
  };

  return (
    <AppleLogin
      clientId="com.your.app.service"
      redirectURI="https://yourdomain.com/api/auth/apple/callback"
      responseType="code id_token"
      responseMode="form_post"
      usePopup={true}
      callback={responseApple}
    />
  );
}

---

Backend verification

Google token verification

If your backend is Node.js:

npm install google-auth-library

import { OAuth2Client } from 'google-auth-library';

const client = new OAuth2Client(process.env.GOOGLE_CLIENT_ID);

app.post('/api/auth/google', async (req, res) => {
  const { token } = req.body;

  const ticket = await client.verifyIdToken({
    idToken: token,
    audience: process.env.GOOGLE_CLIENT_ID,
  });

  const payload = ticket.getPayload();
  const userId = payload.sub;
  const email = payload.email;

  // Create/find user, generate session
  res.json({ success: true });
});

---

Apple token verification

Apple tokens are validated via Apple’s public keys/JWT verification. Many apps use libraries such as:

• apple-signin-auth
• jose for JWT verification

You’ll typically:

• verify identity_token
• validate aud, iss, exp
• optionally exchange code for refresh/access tokens from Apple

---

Important setup requirements

Google

• Create a Google Cloud project
• Configure OAuth consent screen
• Create OAuth client ID
• Add authorized redirect URIs / origins

Apple

• Requires Apple Developer Program membership
• Create:
  • Service ID
  • Key
  • Team ID
  • Client ID
• Configure:
  • redirect URLs
  • domain verification
• Apple login works best on HTTPS and production domains

---

UX tip

Provide both buttons:

• “Continue with Google”
• “Continue with Apple”

And make the login flow consistent:

• provider returns token
• backend verifies
• backend issues your app auth token/cookie

---

Recommended secure architecture

• React only handles the login UI
• Backend handles validation and user creation
• Use HttpOnly secure cookies or short-lived JWTs for your own auth
• Never trust unverified provider data on the client

---

If you want, I can give you:

1. a complete React + Node.js example
2. a Firebase-based solution
3. a Next.js implementation
4. or Google + Apple login with Supabase