Redirected to /api/auth

[benjick]

Hello!

I'm trying to use this package for my SvelteKit app. I'm using @sveltejs/kit 1.0.0-next.132.

I've copied your src/routes/api/auth/[...auth].ts and src/routes/login.svelte files. After clicking "Login with Google" I'm sent to through Googles flow but finally I just end up at /api/auth with a "Not found" message. If I go to /profile nothing is saved in the session.

Any suggestions on how to make this work? Cheers

[Odonno]

I have the same problem with a different auth provider. I don't know why this is happening and how to specify the redirect url after successful authentication...

[Odonno]

Ok, after reading the source code for 1 hour, I found the solution. You have to set the redirect property in the query params. So, for example:

<a href="/api/auth/signin/twitter?redirect=/" />

[ar4hc]

here too.

<a href="/api/auth/signin/keycloak?redirect=/profile">login</a>

works, but

const config = {
/// [...]
    redirect: '/profile',
// or:  redirect: 'http://localhost:3000/profile', same result: not working...
    scope: ['openid', 'email'],
    contentType: 'application/x-www-form-urlencoded',
    grantType: 'authorization_code',
    responseType: 'code',
};

const keycloakProvider = new OAuth2Provider(config);

const developmentOptions = dev ? { host: 'localhost:3000', protocol: 'http'}: {};

export const appAuth = new SvelteKitAuth({
    providers: [keycloakProvider],
    callbacks: {
        /* for debugging
        redirect: (uri) => {
            console.log('auth redirect', uri);
            return uri;
        },
        */
        jwt(token, profile) {
            if (profile?.provider) {
                const { provider, ...account } = profile;
                token = {
                    ...token,
                    user: {
                        ...(token.user ?? {}),
                        connections: { ...(token.user?.connections ?? {}), [provider]: account },
                    },
                };
            }
            return token;
        },
    },
    ...developmentOptions,
    basePath: '/api/auth',
});

does not, i get a redirect to '/auth/api' and a 404, not even in my svelte __layout, just plain text.

The source code mention above looks fine to me....

Workaround is fine, but ...

Why....?

[ar4hc]

Update:

after looking a bit more at the code i found this in src/providers/oauth2.base.ts:

  async signin(event: RequestEvent, auth: Auth): Promise<EndpointOutput> {
    const { method } = event.request;
    const { url } = event;
    const state = [
      `redirect=${url.searchParams.get("redirect") ?? this.getUri(auth, "/", url.host)}`,
    ].join(",");
    const base64State = Buffer.from(state).toString("base64");
    const nonce = Math.round(Math.random() * 1000).toString(); // TODO: Generate random based on user values
    const authUrl = await this.getAuthorizationUrl(event, auth, base64State, nonce);
// [...]

this method does not take the config object like the one defined in src/client/signIn.ts. and takes the redirect url from the given url using url.searchParams only.

Not sure where this is called and if config is available there...

[megagames-me]

I am having this issue too, but I already set the redirect to /. I'm trying a very janky workaround by setting the redirect callback to the following:

redirect(url: string): string {
  return "/"
}

Furthermore, this problem only happens when I deploy to heroku. Even building locally and running doesn't have this issue. I'm going to try the workaround and tell if it works.

Update: It works. I have no clue why, but at least it works.