sst / ion

SST v3
https://sst.dev
MIT License
2.14k stars 250 forks source link

SST Ion Auth with Google running into issues #1233

Open rnnyrk opened 1 week ago

rnnyrk commented 1 week ago

Hi there,

I'm trying to setup SST Auth in Ion with Google login. I took this example (https://github.com/sst/ion/tree/dev/examples/aws-auth) as an base for my setup and tried to go from there.

Unfortunately I'm running into some issue. I've tried to mimic my code as good as possible in this Stackblitz (https://stackblitz.com/edit/sst-auth-google-login-example).

I took the following steps:

TypeError: Cannot use 'in' operator to search for 'getSSTLink' in https://xxx.lambda-url.eu-central-1.on.aws/

  • In src/app/admin/layout.tsx I try to get the authorization header (as shown in your example in the ion repository)
  • When no token or session is available redirect to ${Resource.AuthAuthenticator.url}google/authorize?${params}. This results in the url:

'https://xxx.lambda-url.eu-central-1.on.aws/google/authorize?response_type=code&redirect_uri=https%3A%2F%2FXXX.lambda-url.eu-central-1.on.aws&client_id=XXX.apps.googleusercontent.com&state=5f40dddd-61bb-4af7-92e 9-61c5e702d6ba&scope=openid%20profile%20email

The lambda appending /google/authorize is const auth = sst.aws.Auth and the redirect_uri is the const authCallbackLambda = sst.aws.Function

I've been trying a bunch of different redirect_uri's but nothing is working:

Screenshot 2024-10-09 at 17 27 41

Whatever I do or try I keep getting a Google error with

Fout 400: redirect_uri_mismatch

I've setup Google login so many times I know I'd set everything up correctly on the config side.

What am I missing or is not working properly? How to configure the callback lamda?

rnnyrk commented 5 days ago

I know figured out the correct redirect url for Google. It's the auth.authenticator.url, but as mentioned before linking this to my Next app results in a TypeError: Cannot use 'in' operator to search for 'getSSTLink' in https://xxx.lambda-url.eu-central-1.on.aws/, so I have to use the hardcoded value for now.

In my next app/admin/page.tsx I assert if there is an token, if not, redirect to the admin page

  const token = cookiesList.get('token') ?? '';
  const state = crypto.randomUUID();

  const queryParams = qs.stringify({
    response_type: 'code',
    redirect_uri: `${AUTH_URL}google/callback`,
    client_id: CLIENT_ID,
    state,
    scope: 'openid profile email',
  });

  const googleUrl = `${AUTH_URL}google/authorize?${queryParams}`;

  if (!token && !searchParams.token) {
    redirect(googleUrl);
  }

This seems to work. In my auth.ts I get correct tokenset and a valid login, but my AuthAuthenticator is breaking on a state mismatch..

Screenshot 2024-10-15 at 18 32 50

It now redirects me to https://XXX.lambda-url.eu-central-1.on.aws/google/callback?code=eyJhbGciOiJSUzUxMiJ9....&state=3996f295-d2b7-4dfa-897b-02650ea93fc8

Not providing a state (although optional in https://developers.google.com/identity/openid-connect/openid-connect#response-type) results in a RPError: state missing from the response

I'd try to look more into https://guide.sst.dev/examples/how-to-add-google-login-to-your-sst-apps.html But since some things differ and I keep running into errors, it's super hard to figure out how this is supposed to work