Skip to content

feat: Update Google sign-in doc for web redirect flow#494

Open
vfiruz97 wants to merge 1 commit into
serverpod:mainfrom
vfiruz97:refactor/google-idp-fix-sign-in-on-web
Open

feat: Update Google sign-in doc for web redirect flow#494
vfiruz97 wants to merge 1 commit into
serverpod:mainfrom
vfiruz97:refactor/google-idp-fix-sign-in-on-web

Conversation

@vfiruz97
Copy link
Copy Markdown
Contributor

@vfiruz97 vfiruz97 commented May 12, 2026 •
edited
Loading

This PR is updating Google IdP doc to reflect a new changes in Google IdP in serverpod/serverpod#5093.

Now Google IdP supports 'redirect' mode using generic PKCE Oauth2 standard using flutter_web_auth_2 package on web similar to GitHub IdP.

Setup redirect mode (web)

Step 1 — Create web/auth.html in your Flutter project with this exact content:

<!DOCTYPE html>
<title>Authentication complete</title>
<p>Authentication is complete. If this does not happen automatically, please close the window.</p>
<script>
  function postAuthenticationMessage() {
    const message = {
      'flutter-web-auth-2': window.location.href
    };
    if (window.opener) {
      window.opener.postMessage(message, window.location.origin);
      window.close();
    } else if (window.parent && window.parent !== window) {
      window.parent.postMessage(message, window.location.origin);
    } else {
      localStorage.setItem('flutter-web-auth-2', window.location.href);
      window.close();
    }
  }
  postAuthenticationMessage();
</script>

Step 2 — Google Cloud Console:

  • Ensure the Web application credential exists (not just Android/iOS).
  • Add https://yourdomain.com/auth.html to its Authorized redirect URIs.
  • For local dev, also add http://localhost:PORT/auth.html.
  • The client_id from google client secret.

Step 3 — App startup:

// main.dart — call initializeGoogleSignIn
await client.auth.initializeGoogleSignIn(
  clientId: 'web-client-id.apps.googleusercontent.com',
  redirectUri: 'https://yourdomain.com/auth.html',
  // For local dev use 'http://localhost:PORT/auth.html'
);

How it works on web: When the user taps sign-in, flutter_web_auth_2 opens a new
browser tab/window to Google's OAuth page. Google redirects to auth.html with
?code=... in the URL. The auth.html script calls window.opener.postMessage() to
send the code back to the Flutter app — no URL scheme interception needed on web.
The callbackUrlScheme param is irrelevant on web and is only used on native platforms.

Native (iOS / Android / macOS) — No Change

// Nothing changes for native platforms.
await client.auth.initializeGoogleSignIn(...); // unchanged
GoogleSignInWidget(client: client, onAuthenticated: ...) // unchanged

@vfiruz97
Copy link
Copy Markdown
Contributor Author

vfiruz97 commented May 12, 2026

Hi @Zfinix!
When you have a chance, review please. if it is necessary, feel free to make change.

@Zfinix
Copy link
Copy Markdown
Contributor

Zfinix commented May 12, 2026

Okay 👍 will do

@marcelomendoncasoares marcelomendoncasoares removed their request for review May 12, 2026 12:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Zfinix Zfinix Awaiting requested review from Zfinix

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@vfiruz97 @Zfinix