[🐞] Supabase login session does not work

[y471n]

Which component is affected?

Qwik Runtime

Describe the bug

From Supabase after login, I get redirected to http://localhost:5173/#access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpX...

There are 2 issues in this.

1. Supabase is not able to set the session automatically in Qwik from the access_token and refresh_token (I checked they are valid).
2. If I'm trying to set it manually, I don't get the part of the URL after # via the useLocation hook. I can see in console the following object:

   loc:: {
   url: URL {
   href: 'http://localhost:5173/',
   origin: 'http://localhost:5173',
   protocol: 'http:',
   username: '',
   password: '',
   host: 'localhost:5173',
   hostname: 'localhost',
   port: '5173',
   pathname: '/',
   search: '',
   searchParams: URLSearchParams {},
   hash: ''
   },
   params: {},
   isNavigating: false,
   prevUrl: URL {
   href: 'http://localhost:5173/',
   origin: 'http://localhost:5173',
   protocol: 'http:',
   username: '',
   password: '',
   host: 'localhost:5173',
   hostname: 'localhost',
   port: '5173',
   pathname: '/',
   search: '',
   searchParams: URLSearchParams {},
   hash: ''
   }
   }

Reproduction

https://stackblitz.com/edit/qwik-starter-r4xto2?file=src%2Froutes%2Findex.tsx

Steps to reproduce

No response

System Info

System:
    OS: macOS 13.3.1
    CPU: (8) arm64 Apple M2
    Memory: 290.83 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.16.0/bin/yarn
    npm: 9.6.6 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 113.0.5672.126
    Safari: 16.4
  npmPackages:
    @builder.io/qwik: 1.1.1 => 1.1.1
    @builder.io/qwik-city: ~1.1.1 => 1.1.1
    undici: 5.22.1 => 5.22.1
    vite: 4.3.5 => 4.3.5

Additional Information

The first part of the issue isn't reproduced on StackBlitz but there's an ongoing related discussion to it on Qwik Discord at: https://discord.com/channels/842438759945601056/1111605183483482162/1111605183483482162

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• qwik-starter-r4xto2 (Open reproduction)

[kokecar11]

Supabase puts by default in the LocalStorage the authentication information, how I solved it was by creating a hook that gets that localStorage and then set it as a cookie in the path.

[y471n]

@kokecar11 Can you share an example of that?

[gioboa]

Any news on this issue? @kokecar11 can you share your solution pls?

[C0DE-IN]

import { type Cookie } from '@builder.io/qwik-city';
import { createServerClient as _createServerClient, type CookieOptions } from '@supabase/ssr';

export const createServerClient = (headers: Headers, cookie: Cookie, next: { (): Promise<void>; }) => {
    return _createServerClient(
        import.meta.env.PUBLIC_SUPABASE_URL!,
        import.meta.env.PUBLIC_SUPABASE_ANON_KEY!,
        {
            cookies: {
                get(key: string) {
                    return cookie.get(key)?.value
                },
                async set(key: string, value: string, options: CookieOptions) {
                    try {
                        cookie.set(
                            key,
                            value,
                            { ...options },
                        )
                        headers.set(
                            key,
                            value
                        )

                    } catch (error) {
                        console.log(error)
                    } finally {
                        await next();
                    }
                },
                async remove(key: string, options: CookieOptions) {
                    try {
                        cookie.delete(
                            key,
                            { ...options },
                        )
                        headers.delete(key)

                    } catch (error) {
                        console.log(error)
                    } finally {
                        await next();
                    }
                },
            },
        }
    )
}

[gioboa]

Thanks @C0DE-IN for sharing your solution. @y471n I'm closing this one because we have a solution, feel free to open a new issue if it's still an issue for you. Thanks