Google Sign In ​

Teenybase supports two Google sign-in flows. Both share the same Google Cloud Console setup and the same authProviders config — only the frontend wiring differs.

Pick a flow ​

If you are not sure, start with the redirect flow.

Prerequisites ​

You need a table with an auth extension (the default npx teenybase create template includes one). If you started from a blank template, see the Quickstart for the auth table setup.

1. Google Cloud Console ​

1. Go to Google Cloud Console
2. Create a project (or select existing)
3. Go to APIs & Services > Credentials
4. Click Create Credentials > OAuth client ID
5. Application type: Web application
6. Add authorized JavaScript origins:
   • http://localhost:8787 (local dev)
   • Your production URL (see tip below)
7. Add authorized redirect URIs (only required for the redirect flow — One Tap does not need these):
   • http://localhost:8787/api/v1/table/users/auth/oauth/google/callback
   • https://{your-production-url}/api/v1/table/users/auth/oauth/google/callback
8. Copy the Client ID and Client Secret

2. Add secrets ​

In .dev.vars, add:

GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-client-secret

The One Tap flow does not need GOOGLE_CLIENT_SECRET — only the redirect flow does.

3. Add config ​

For the redirect flow (server-rendered apps, custom frontends):

export default {
  // ...existing config...

  authProviders: [
    {
      name: 'google',
      clientId: '$GOOGLE_CLIENT_ID',
      clientSecret: '$GOOGLE_CLIENT_SECRET',
      redirectUrl: '/dashboard',  // Where to send user after login
    },
  ],

  // authCookie enables cookie-based sessions. The OAuth redirect flow
  // sets this cookie after login so the browser stays authenticated.
  // Without it, the redirect flow has no way to deliver the token.
  authCookie: { name: 'teeny_auth' },

} satisfies DatabaseSettings

For the One Tap / SPA flow:

export default {
  // ...existing config...

  authProviders: [
    {
      name: 'google',
      clientId: '$GOOGLE_CLIENT_ID',
    },
  ],

} satisfies DatabaseSettings

4. Wire up the frontend ​

The frontend wiring is the part that differs between the two flows. Pick one:

• Google Sign In (Custom Frontend) — link your "Continue with Google" button to the OAuth authorize endpoint and let teenybase handle the redirect
• Google One Tap / SPA — drop the Google client script into your HTML and POST the credential to teenybase

5. Deploy to production ​

Add the same secrets to .prod.vars:

GOOGLE_CLIENT_ID=your-client-id.apps.googleusercontent.com
GOOGLE_CLIENT_SECRET=your-client-secret

Update appUrl in teenybase.ts to your production frontend URL, and update redirectUrl if needed.

Deploy and upload secrets:

npx teenybase deploy --remote --yes
npx teenybase secrets --remote --upload

The deploy prints your production URL (also saved as apiRoute in infra.jsonc). Make sure the callback URLs you registered in Google Cloud Console (step 7 above) use it.