# Configure OAuth Login: Google and GitHub | Talizen

> Let visitors sign in with an existing Google or GitHub account.

[Talizen Help](/)

[EN](/docs/backend-auth.md)/ [中文](/docs/backend-auth.md?lang=zh)

### Start

- [Start your first vibe site](/docs/start.md)
- [Import and Publish AI Studio Projects](/docs/ai-studio-import-publish.md)
- [Import Figma Designs into Talizen](/docs/figma-import-publish.md)

### Common

- [Prompt library](/docs/prompt-lib.md)
- [Talizen Skill](/docs/talizen-skill.md)
- [Operate Form via Prompt](/docs/form.md)
- [Operate CMS via Prompt](/docs/cms.md)
- [FAQ](/docs/faq.md)
- [Prompting Tips](/docs/prompt.md)

### Backend

- [Add Login, Bookings, and Member Features](/docs/backend.md)
- [Configure OAuth Login: Google and GitHub](/docs/backend-auth.md)
- [Take Payments with Alipay](/docs/alipay-payment.md)

### tips

- [How to Install ReactBits Components](/docs/reactbits.md)

### Developers

[API for AI](/api.md)

Implementation reference for AI coding agents.

BackendConfigure OAuth Login: Google and GitHub

# Configure OAuth Login: Google and GitHub

OAuth lets visitors sign in to your Talizen site with an existing Google or GitHub account. These users belong to **your project's Auth system**, not to the Talizen editor team, so you can build member centers, private pages, bookings, downloads, and customer portals on top of them.

The whole setup is three steps: create an OAuth app in Google or GitHub, copy the Client ID, Client Secret, and callback domain into Talizen, then ask the AI to add the login UI.

## Before You Start

- Your site needs an HTTPS domain that is actually in use — a preview domain or your production custom domain both work.

- You need access to **Backend → Auth → Settings & OAuth** in the editor.

- You need permission to create OAuth apps in Google Cloud Console or GitHub Developer Settings.


## Understand the Callback URL First

The Talizen OAuth callback URL is simply **your current site URL + `/auth/oauth/callback/{provider}`**.

```
https://your-domain.com/auth/oauth/callback/google
https://your-domain.com/auth/oauth/callback/github
```

That full URL is what you register **in the Google / GitHub console**. On the Talizen side you only enter the domain — the field is called **Callback Domain**, and the platform fills in the rest of the path for you.

Make sure the domain is the one your visitors actually use. If you are on `https://www.example.com`, do not enter a preview domain. If you are testing on a preview domain, use that preview domain.

**Important:** If you change the site domain later, you must update the callback URL in the Google or GitHub console and the Callback Domain in Talizen. Otherwise OAuth login fails because the callback URL no longer matches.

## Google Login

### 1\. Create an OAuth Client in Google

1. Open Google Cloud Console and select the relevant project.

2. Configure the OAuth consent screen with an app name and support email. If the app is still in testing, add test users.

3. Go to **APIs & Services → Credentials** and create an OAuth client.

4. Choose **Web application** as the application type.

5. Add your site origin under Authorized JavaScript origins, for example `https://your-domain.com`.

6. Add `https://your-domain.com/auth/oauth/callback/google` under Authorized redirect URIs.

7. Copy the **Client ID** and **Client Secret**.


### 2\. Add the Provider in Talizen

Go to **Backend → Auth → Settings & OAuth**, click **New provider** in the OAuth Providers section, then click **Use Google preset**.

The preset fills these fields for you — no manual typing required:

| Field | Value filled by the preset |
| --- | --- |
| Provider Key | `google` |
| Display Name | `Google` |
| Issuer | `https://accounts.google.com` |
| Scopes | `openid,profile,email` |
| Authorization URL | `https://accounts.google.com/o/oauth2/v2/auth` |
| Token URL | `https://oauth2.googleapis.com/token` |
| UserInfo URL | `https://openidconnect.googleapis.com/v1/userinfo` |

You only add three things:

- **Client ID** — from Google Cloud.

- **Client Secret** — from Google Cloud.

- **Callback Domain** — the domain only, for example `your-domain.com`. The `https://` prefix and the path are added by the platform.


Confirm **Status** is **Enabled** and save.

## GitHub Login

### 1\. Create an OAuth App in GitHub

1. Open GitHub and go to **Settings → Developer settings → OAuth Apps**.

2. Click **New OAuth App**.

3. Set Application name to your site or brand name.

4. Set Homepage URL to your site domain, for example `https://your-domain.com`.

5. Set Authorization callback URL to `https://your-domain.com/auth/oauth/callback/github`.

6. Copy the **Client ID** and generate a **Client Secret**.


### 2\. Add the Provider in Talizen

Click **New provider** again, then **Use GitHub preset**:

| Field | Value filled by the preset |
| --- | --- |
| Provider Key | `github` |
| Display Name | `GitHub` |
| Issuer | `https://github.com` |
| Scopes | `read:user,user:email` |
| Authorization URL | `https://github.com/login/oauth/authorize` |
| Token URL | `https://github.com/login/oauth/access_token` |
| UserInfo URL | `https://api.github.com/user` |

Add the Client ID, Client Secret, and Callback Domain, set Status to Enabled, and save.

## Other Supported Providers

Besides Google and GitHub, New provider ships presets for **Facebook**, **Microsoft**, **Discord**, **X**, and **Talizen**. The flow is identical: pick the preset, add Client ID / Client Secret / Callback Domain, enable it.

If the provider you need has no preset, skip the presets and fill in Issuer, Scopes, and the three URLs by hand — any standard OAuth / OIDC service works.

## Check Your Registration Policy

**Auth Settings** at the top of the same page controls whether visitors can create accounts:

- **Closed** — registration is not allowed.

- **From page code** — page code can start a registration (the default).

- **Backend function only** — only a backend Func can create accounts, which suits invite-only or reviewed signups.


**Require a verified email to sign up** below it forces email verification before an account is created; turning it on needs an email integration configured first.

## Ask the AI to Add Login UI

Once a provider is enabled, ask the AI to add a login page, login buttons, or a member center. Describe it directly:

> Add a login page with Google and GitHub login buttons.

> Add a member center. Visitors who are not signed in should see all enabled OAuth providers. Signed-in users should see their avatar, name, email, and a logout button.

> Require login before the booking form can be used. If the visitor is not signed in, show a login prompt first.

## Test the Flow

1. Open the site on the same domain used in the callback URL.

2. Open the login page in an incognito window.

3. Click Google or GitHub and complete the authorization.

4. Confirm the provider redirects back to `/auth/oauth/callback/{provider}` on your site with no `redirect_uri_mismatch`.

5. Go to **Backend → Auth → Users** and confirm a new project user was created.


## Troubleshooting

| Problem | What to check |
| --- | --- |
| `redirect_uri_mismatch` | Compare the callback URL in Google / GitHub character by character against "Talizen Callback Domain + `/auth/oauth/callback/{provider}`", including HTTPS, domain, path, and trailing slash. |
| Provider missing on the login page | Confirm the provider Status is Enabled, and have the AI read the enabled Auth Providers instead of hardcoding buttons. |
| Login breaks after a domain change | Update the callback URL in the Google / GitHub console and the Callback Domain in Talizen. |
| GitHub works on preview but not production | A GitHub OAuth App holds only one callback URL. Create or update an OAuth App for the domain you are actually using. |
| Google only works for your own account | Check the OAuth consent screen publishing status and the test user list. |

## Security Notes

- Never paste a Client Secret into page code, public content, or an AI conversation. It belongs only in the OAuth provider settings.

- Use an HTTPS domain for OAuth callbacks.

- Keep scopes minimal. For login, Google usually needs only `openid,profile,email` and GitHub only `read:user,user:email` — exactly what the presets fill in.

- If a Client Secret leaks, rotate it in Google or GitHub immediately and update the provider in Talizen.


## References

- [Google OAuth 2.0 for web server applications](https://developers.google.com/identity/protocols/oauth2/web-server)

- [Google OpenID Connect redirect URI guide](https://developers.google.com/identity/openid-connect/openid-connect)

- [GitHub Docs: Creating an OAuth app](https://docs.github.com/en/apps/oauth-apps/building-oauth-apps/creating-an-oauth-app)


[Previous\
\
Add Login, Bookings, and Member Features](/docs/backend.md) [Next\
\
Take Payments with Alipay](/docs/alipay-payment.md)

On this page

- [Before You Start](#header-0)
- [Understand the Callback URL First](#header-1)
- [Google Login](#header-2)
- [1\. Create an OAuth Client in Google](#header-3)
- [2\. Add the Provider in Talizen](#header-4)
- [GitHub Login](#header-5)
- [1\. Create an OAuth App in GitHub](#header-6)
- [2\. Add the Provider in Talizen](#header-7)
- [Other Supported Providers](#header-8)
- [Check Your Registration Policy](#header-9)
- [Ask the AI to Add Login UI](#header-10)
- [Test the Flow](#header-11)
- [Troubleshooting](#header-12)
- [Security Notes](#header-13)
- [References](#header-14)

Need more help?

[Contact Support](/contact.md)

> 全站页面清单：[/llms.txt](/llms.txt)