I am trying to authenticate a user with Web3, but since the Supabase docs regarding this topic are not working for me, and are not using Next.js 14 nor SSR, I tried a different approach using a Magic link.

At the end of the line, I receive a 401 error saying access token is missing a sub claim.

So this is what I am doing now, so in my API route after the user has connected his wallet with picket, I am generating the magic link like the docs told me:

const serviceClient = createClient<Database>(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_SERVICE_ROLE_KEY,
  { auth: { persistSession: false, autoRefreshToken: false }}
)
const magicLink = await serviceClient.auth.admin.generateLink({ email, type: 'magiclink' });
return Response.json({success: true, magicLink});

Then, in the component that called this API route, I receive the magicLink and send the user to it:

const res = await fetch('/api/wallet', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: ... some data here for Picket verification ...,
});

const data = await res.json();
window.location.href = data.magicLink.data.properties.action_link;

Then when the user has been redirected to the action link, he finally strands on the base URL which has an accessToken appended to it in the hash. So I am taking this accessToken from the URL, putting it in a cookie and then on every page that needs authentication I take the accessToken from the cookie and pass it to my Supabase browser client:

.... getting accessToken from URL ...
    if (!accessToken || !expiresIn) return;

    const cookieOpts: CookieAttributes = {
      path: '/',
      secure: process.env.NODE_ENV !== 'development',
      sameSite: 'strict',
      expires: parseInt(expiresIn)
    };

    cookies.set('sb-client-access-token', accessToken, cookieOpts);
    router.push('/');

After that I get the following error: AuthApiError: invalid claim: missing sub claim