How to add "Sign in with Google" and other providers

In TeleportHQ, you add "Sign in with Google" from the authentication settings: open Manage Settings & Users → Settings, find Google under OAuth Providers and click Enable on its card. Copy the OAuth Callback URL into your Google Cloud project, paste Google's Client ID and Client Secret back, click Enable and publish. The same steps work for GitHub, Apple, Discord, LinkedIn, Facebook, Azure Active Directory and about 60 other providers.

Before you start#

• Authentication must be turned on. See How to add sign-up and login to your site.
• Publish your site first, ideally on its final address. The callback URL is built from your published address: your custom domain if you connected one, otherwise your TeleportHQ address. Before the first publish, or after you take the site offline, it shows <your_domain> instead.
• You need an account with the provider's developer tools, for example a Google account for Google Cloud Console.

Steps#

1. Copy the callback URL from TeleportHQ#

1. In the TeleportHQ editor, click the padlock button at the top left of the canvas.
2. Click Manage Settings & Users. The window opens on its Users tab; click the Settings tab.
3. Under OAuth Providers, type Google in Search providers....

4. On the Google card, click Enable. The Google Configuration panel opens. Nothing is turned on yet.

   

5. Under OAuth Callback URL, click the copy button next to the address. It looks like https://mybakery.teleporthq.app/api/auth/callback/google.

If the URL shows <your_domain>, replace that part with your real address once you've published or connected a custom domain.

The TeleportHQ Google Configuration panel shows:

1. OAuth Callback URL, with its copy button.
2. Where do I find these?, which opens the setup steps for this provider next to the form.
3. Client ID and Client Secret, the credentials you get from Google.
4. Enable, which turns the provider on. It stays greyed out until the required fields are filled.

2. Create the credentials at Google#

Click Where do I find these? in TeleportHQ to see these steps next to the form. Hide setup steps closes them.

1. Open Google Cloud Console → APIs & Services → Credentials (https://console.cloud.google.com/apis/credentials) and create or select a project.
2. Set up the OAuth consent screen: choose External, add your app name and support email, and add the scopes openid, email and profile.
3. Click Create Credentials → OAuth client ID and choose the application type Web application.
4. Under Authorized redirect URIs, paste the callback URL you copied.
5. Save. Google shows your Client ID and Client Secret.

3. Enable the provider in TeleportHQ#

1. Back in the Google Configuration panel, under Provider credentials, paste the Client ID. When you leave the field, TeleportHQ saves the value as a project secret.
2. Paste the Client Secret.
3. Click Enable.
4. Publish your site so the button appears on your live sign-in page.

TeleportHQ adds a "Continue with Google" button to your sign-in and sign-up pages.

Check that it worked#

• The Google card shows Configured, and its button now reads Manage.
• On your published site, the sign-in page has a Google button. Click it and sign in with a Google account.

Troubleshooting#

Google shows a "redirect URI mismatch" error The callback URL registered at Google doesn't match your site's address exactly. Copy the OAuth Callback URL from TeleportHQ again and paste it into Authorized redirect URIs. If you moved to a custom domain, register the new URL too.

"We could not start sign-in with that provider. Please try again." The provider credentials are wrong or incomplete. Open the provider with Manage, check the Client ID and Client Secret, click Update, and publish again.

"Sign-in is not configured correctly for this site. The site owner needs to check its authentication settings." Your visitors see this when the sign-in settings are incomplete. Check each enabled provider, then publish again.

"An account with this email already exists. Sign in the way you did originally, then link this provider from your profile." The visitor first signed up with email and password. They need to sign in that way.

Only some Google users can sign in While your Google app is in "Testing" mode, only the test users you added can sign in. Publish the app at Google to let anyone sign in.

"The provider sign-in button could not be added to … Use "Regenerate authentication pages" to rebuild the missing page." TeleportHQ adds the provider's button to the pages named sign-in and sign-up. If you renamed one, rename it back, then click Manage on the provider and Update. If you deleted the whole authentication folder, rebuild it first: see "The sign-in pages are gone" in How to add sign-up and login to your site.

Good to know#

• Other providers ask for other fields. Facebook asks for App ID and App Secret; Auth0 adds Domain; Keycloak and several others add Issuer URL. Fields that need an address say so: "Enter the full URL exactly as shown in your provider's dashboard, including https://."
• One callback URL per app. "Many providers only allow one callback URL per OAuth app." If you need separate test and live addresses, create a separate app at the provider for each.
• Your keys are project secrets. They're stored in your project's Secrets, and your published site gets them when you publish. See How to keep passwords and API keys safe (Secrets).
• To turn a provider off, click Manage on its card, then Disable Provider.