Skip to content

Updating visuals

If you see any images containing outdated UI, please bear with us.

We are updating all content as quickly as possible to mirror our new UI.

Google authentication

Google lets your users sign in with the Google account they already use for Gmail, Google Workspace, and other Google services. Once connected, you can use Google as a social provider in your WeWeb sign-in flows without asking users to create a separate password for your app.

What this integration supports

  • Let users sign in with their Google account.
  • Work with the Sign in with social provider action in your interface workflows.
  • Use the same WeWeb Users, Roles, protected pages, and protected API rules as any other sign-in method.
  • Send users to different pages after sign in, after an error, or on first sign in.

Setup in Google Cloud

All configuration for this provider happens in the Google Cloud Console. You will create a web OAuth client, add the domains where users can start sign in, and add the exact callback URL Google should use.

1. Create a project and enable OAuth

  1. Go to the Google Cloud Console.
  2. Create or select a project for your application.
  3. In the left menu, open APIs & Services -> OAuth consent screen.
  4. Complete the consent screen setup:
    • Choose External for most public apps.
    • Fill in the app name and support email.
    • Add your app domains under Authorized domains.
  5. Save and continue until the consent screen is published, or keep it in testing mode while you add test users.

2. Create OAuth client credentials

  1. Still in APIs & Services, go to Credentials.
  2. Click Create credentials -> OAuth client ID.
  3. Choose Web application as the application type.
  4. Under Authorized JavaScript origins, add the full origin for each place where users can start Google sign in.
  5. Under Authorized redirect URIs, add the fixed Google callback URL for each origin by adding /api/auth/callback/google to the end of that origin.
  6. Click Create and copy the generated Client ID and Client secret.

Use the same origin and callback pair for each environment you want to support:

Where users start sign inAuthorized JavaScript originAuthorized redirect URI
Editor projecthttps://<your-project-id>-editor.weweb.iohttps://<your-project-id>-editor.weweb.io/api/auth/callback/google
Published apphttps://your-domain.comhttps://your-domain.com/api/auth/callback/google
Preview or staging apphttps://your-preview-domain.comhttps://your-preview-domain.com/api/auth/callback/google

FULL URLS MATTER

For Authorized JavaScript origins, Google expects the full origin with https://.

For Authorized redirect URIs, Google expects the full callback URL, not just the domain.

Connect Google in WeWeb

With your Google credentials ready, connect the provider in WeWeb.

  1. In the WeWeb editor, open Data & API -> Auth -> Integrating providers.
  2. Find the Google provider section and expand it.
  3. Turn on the Enable toggle for Google.
  4. Paste your values:
    • Client IDs - Your Google OAuth client ID. If you use multiple client IDs, paste them as a comma-separated list.
    • Client Secret (for OAuth) - The client secret from your Google OAuth client.
  5. Save your changes.

GOOGLE CALLBACK URL VS SUCCESS PAGE

The Google Console redirect URI is always the provider callback URL, such as https://your-domain.com/api/auth/callback/google.

The Success page, Error page, and New user page you choose in WeWeb are separate. They are the pages inside your app where users land after the Google callback is complete.

Test sign in

After saving the provider configuration, test that everything works end to end.

  1. In the editor, add a button or link to your interface.
  2. Attach a workflow with the Sign in with social provider interface action.
  3. In the action options:
    • Set Provider to google.
    • Choose a Success page for where users should land after sign in.
    • Choose an Error page for where users should go if sign in fails.
    • Optionally choose a New user page if you want to route first-time users differently.
  4. Preview your project and click the button.
  5. Complete the Google sign-in flow with a test Google account.
  6. Confirm that:
    • You are redirected to the correct page in your app after sign in.
    • You are authenticated as the corresponding user.

For general information about how sessions, roles, and page protection work once a user is signed in, see Using authentication in WeWeb ->.

Common pitfalls

Redirect URI mismatch

If Google shows a redirect_uri_mismatch error, the redirect URL used by your app does not match what you configured in the Google Cloud Console.

Confirm the value in Authorized redirect URIs is the full callback URL, such as https://your-domain.com/api/auth/callback/google.

Wrong domain or environment

If sign in works in one environment but not another, check that:

  • Each environment has both entries added in Google.
  • The full origin is listed in Authorized JavaScript origins.
  • The same origin plus /api/auth/callback/google is listed in Authorized redirect URIs.
  • You updated Google if you changed your editor domain, preview domain, or custom domain.

Using the success page as the Google callback

The Success page in the Sign in with social provider action is not the value you paste into Google.

  • Google needs the fixed WeWeb callback URL: https://<origin>/api/auth/callback/google.
  • The action page settings only decide where the user lands after that callback is complete.

If your Google app is still in testing mode, only approved test users can sign in.

  1. Open APIs & Services -> OAuth consent screen.
  2. Add your test Google accounts before trying the flow.

Reference

WeWeb settings reference

SettingDescriptionWhere to find it in Google
EnableTurns Google sign in on for your WeWeb project.Not used in Google. Turn this on in WeWeb after you finish the Google setup.
Client IDsOne or more OAuth client IDs that identify your app to Google.APIs & Services -> Credentials -> OAuth 2.0 Client IDs
Client Secret (for OAuth)Secret used by WeWeb when completing the Google sign-in flow.Open the same OAuth client in Credentials, then copy the Client secret.

Google values to prepare

Google fieldWhat to enter
Authorized domainsYour domain only, without a path.
Authorized JavaScript originsThe full origin where sign in starts, such as https://your-domain.com.
Authorized redirect URIsThe full callback URL, such as https://your-domain.com/api/auth/callback/google.

FAQs

Can I use multiple Google OAuth clients?

Yes. If you have separate client IDs for web, Android, or Chrome extensions, you can paste them into Client IDs as a comma-separated list. Make sure each client is configured with the correct domains and redirect URIs.

What should I put in Google for my WeWeb project editor URL?

If you want Google sign in to work inside the WeWeb editor, add your editor project origin and callback URL:

  • https://<your-project-id>-editor.weweb.io
  • https://<your-project-id>-editor.weweb.io/api/auth/callback/google
Do I need to change anything in my workflows to use Google?

No. Once Google is enabled and configured, you simply use the Sign in with social provider interface action and set Provider to google. The rest of your auth logic stays the same.

Is the success page the same as the Google redirect URI?

No. The Google redirect URI is the fixed callback URL ending in /api/auth/callback/google. The success page is where WeWeb sends the user after Google sign in has already finished.

Can I mix Google sign in with email/password?

Yes. Users can sign up with email/password or sign in with Google on the same project. Behind the scenes, both methods work with the same user and session system.

CONTINUE LEARNING

After Google sign in is working, the next step is deciding what authenticated users can access.

Managing roles ->