S
Supabase•2y ago
Rick

Auth token is stored in local storage?

I feel like this is a dumb question but I don't get it...so here it goes: I read everywhere about the token being stored in a cookie, but that isn't the case for me. I'm using the AuthUI + email only. I couldn't get the server client initiated with the cookies ... and come to find out...those cookies aren't there. So I inspected my browser and I found things like the auth token, in local storage, but nothing in cookies. What am I missing? I'm sure it's simple.
15 Replies
Rick
RickOP•2y ago
To be more specific. I would assume I wouldn't nee dto do this, to talk to an API where Im trying to check against the user's session. Currently I'm doing this to get it to even work (Which looking at the docs...doesn't seem like I should be doing this): CLIENT SIDE: 
        const token = JSON.parse(localStorage.getItem('sb-aqpsyixuuqiflmvbnykl-auth-token') || '{}');
        const accessToken = token.access_token;
        const refreshToken = token.refresh_token;

        await fetch('/api/create-embeddings', {
            method: 'POST',
            body: JSON.stringify({
                id: '1234',
                messages: 'sdfsdfsdfsdfdsfdf',
            }),
            headers: {
                'Content-Type': 'application/json',
                'accesstoken': accessToken,
                'refreshtoken': refreshToken,
            },
            credentials: 'include'
        });
        const token = JSON.parse(localStorage.getItem('sb-aqpsyixuuqiflmvbnykl-auth-token') || '{}');
        const accessToken = token.access_token;
        const refreshToken = token.refresh_token;

        await fetch('/api/create-embeddings', {
            method: 'POST',
            body: JSON.stringify({
                id: '1234',
                messages: 'sdfsdfsdfsdfdsfdf',
            }),
            headers: {
                'Content-Type': 'application/json',
                'accesstoken': accessToken,
                'refreshtoken': refreshToken,
            },
            credentials: 'include'
        });
And on server side (NextJS API) 
    const supabase = createServerClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
        {
            cookies: {
                // NOTE THIS DOESN"T WORK!
                // get(name: string) {
                //     return req.cookies[name];
                // },
                // set(name: string, value: string, options: CookieOptions) {
                //     res.setHeader("Set-Cookie", serialize(name, value, options));
                // },
                // remove(name: string, options: CookieOptions) {
                //     res.setHeader("Set-Cookie", serialize(name, "", options));
                // },
            },
        }
    );
    const session = await supabase.auth.setSession({
        access_token: headers.accesstoken! as string,
        refresh_token: headers.refreshtoken! as string,
    })
    const supabase = createServerClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
        {
            cookies: {
                // NOTE THIS DOESN"T WORK!
                // get(name: string) {
                //     return req.cookies[name];
                // },
                // set(name: string, value: string, options: CookieOptions) {
                //     res.setHeader("Set-Cookie", serialize(name, value, options));
                // },
                // remove(name: string, options: CookieOptions) {
                //     res.setHeader("Set-Cookie", serialize(name, "", options));
                // },
            },
        }
    );
    const session = await supabase.auth.setSession({
        access_token: headers.accesstoken! as string,
        refresh_token: headers.refreshtoken! as string,
    })
reading the docs and examples, it def doesn't seem like I should be doing this...
Oli__
Oli__•2y ago
Ohh, hmm, this actually explains some weirdness I was seeing too! I was trying to complete my PKCE flow in middleware, so I can use any page on the site as a redirect URL (my login form is an in-app modal, and I want to return the user to the same page they were on) and everything seemed to be working, but the session wasn't taking. That makes sense if it's being stored in local storage rather than a cookie. Hmm, but now that I think of it, that doesn't explain why the route handler method worked...
Rick
RickOP•2y ago
I'm not sure why it's happening. From what I can tell in the docs, it's supposed to be in a cookie.
Socal
Socal•2y ago
check the docs on how to make it use the cookie instead of local storage. pretty sure you need to specify the cookie methods to the gotrue client on ssr
j4
j4•2y ago
By default, the supabase client stores the user session in browser localStorage. The cookies piece comes into play if you're using either the legacy auth helpers or the new "auth helpers" aka SSR package.
Rick
RickOP•2y ago
Right, so I'm using SSR package. I didn't see in the docs where it indicates local storage, for the server client stuff. I'll look again https://discord.com/channels/839993398554656828/1185907497790361670 similar issue I'm actually fine to use the local storage route but it just seems like all the docs are heavily impressing me to move to cookies, for the server side handlers.
j4
j4•2y ago
Yes, you have to use cookies for the server side. But I'm not sure why something is being stored in local storage. Are you creating a client somewhere with createClient instead of the SSR package's client-creation functions?
Rick
RickOP•2y ago
You know ... I was only using the SSR package for the server ... using AuthUI on the front end ... maybe it doesn't use that?
j4
j4•2y ago
You'd still need to create a supabase client and pass it to the ui; so what does that code look like?
Rick
RickOP•2y ago
yeh you’re right. i’m using supabasejs
Oli__
Oli__•2y ago
I did end up getting this working, here's how I'm creating my client with SSR: 
  var response = NextResponse.next()
  const supabase = createServerClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return request.cookies.get(name)?.value
        },
        set(name: string, value: string, options: CookieOptions) {
          response.cookies.set({ name, value, ...options })
        },
        remove(name: string, options: CookieOptions) {
          response.cookies.delete({ name, ...options })
        },
      },
    }
  )
  var response = NextResponse.next()
  const supabase = createServerClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        get(name: string) {
          return request.cookies.get(name)?.value
        },
        set(name: string, value: string, options: CookieOptions) {
          response.cookies.set({ name, value, ...options })
        },
        remove(name: string, options: CookieOptions) {
          response.cookies.delete({ name, ...options })
        },
      },
    }
  )
I'm using PKCE, but all I need to do other than that is call this serverside: 
await supabase.auth.exchangeCodeForSession(code)
await supabase.auth.exchangeCodeForSession(code)
And then when I return response, it includes all of the appropriate Set-Cookie: headers for my session And then there's nothing extra that I need to do to include auth when I call fetch() because the browser already sends along the cookie Can you share the full serverside function where you're doing supabase.auth.setSession({ ... })
Rick
RickOP•2y ago
Oli__
Oli__•2y ago
Hmm, yeah, this doesn't look quite right in a couple ways. When I'm creating a supabase client in a page handler like this, I don't have to do anything to set up auth at all, it just works. I also don't need to do setSession() anywhere except the login page. Where is your login page or login callback?
Oli__
Oli__•2y ago
I think I'd go back to these docs pages, figure out how you want to log users in, and follow along with the step-by-step https://supabase.com/docs/reference/javascript/auth-signinwithpassword
Sign in a user | Supabase
Rick
RickOP•2y ago
Yeh exasctly what I would expect too is that the cookies are present but they're not. I will try to do the manual signin flow and see how that works out.

Did you find this page helpful?