---
title: "Google Sign In: Pick a Flow"
description: "Compare teenybase's two Google sign-in flows, OAuth redirect and One Tap / SPA, then follow the shared Google Cloud, secrets and config setup."
url: https://teenybase.com/docs/google-oauth
last_updated: 2026-10-26
---

> Documentation index: https://teenybase.com/llms.txt lists every teenybase docs page with a link to its Markdown version. All docs in one file: https://teenybase.com/llms-full.txt

# 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.

> **Using a coding agent?** Paste this prompt:
>
> Add Google sign-in to my teenybase app. Pick the OAuth redirect flow if I have my own frontend, or the One Tap / SPA flow if it's a single-page app..

## Pick a flow

| | OAuth redirect | One Tap / SPA |
|---|---|---|
| Best for | server-rendered apps, custom frontends with a "Continue with Google" button | single-page apps that get the credential client-side |
| Config needs | `clientId` + `clientSecret` + `authCookie` | `clientId` only |
| Token delivery | cookie set on redirect back to your app | JSON response (or cookie if `authCookie` is set) |
| Callback URL in Google Console | required | not needed |
| Doc | [Google Sign In (Custom Frontend)](https://teenybase.com/docs/guides/google-oauth-custom) | [Google One Tap / SPA](https://teenybase.com/docs/guides/google-oauth-onetap) |

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](https://teenybase.com/docs/getting-started/quickstart) for the auth table setup.

## 1. Google Cloud Console

1. Go to [Google Cloud Console](https://console.cloud.google.com/)
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**

> **Getting your exact URLs**
>
> The callback URL is your base URL + `/api/v1/table/users/auth/oauth/google/callback`. Locally the base URL is `http://localhost:8787`. In production it is the URL `npx teenybase deploy --remote` prints, also saved as `apiRoute` in `infra.jsonc`.

## 2. Add secrets

In `.dev.vars`, add:

```env
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):

```ts
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**:

```ts
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)](https://teenybase.com/docs/guides/google-oauth-custom) — link your "Continue with Google" button to the OAuth authorize endpoint and let teenybase handle the redirect
- [Google One Tap / SPA](https://teenybase.com/docs/guides/google-oauth-onetap) — 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`:

```env
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:

```bash
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.