From various sources it seems that the correct way to connect to supabase when using third party auth solutions such as Stytch or Clerk is to provide a jwt token in the bearer authorization as follows using the @supabase/supabase-js package:
import { createClient } from "@supabase/supabase-js";
const supabase = createClient(
config.public.supabaseUrl,
config.public.supabaseKey,
{
global: {
headers: {
Authorization: Bearer ${jwtToken},
},
},
},
);
It works but I call the above in multiple pages and see the "Multiple GoTrueClient instances detected in the same browser context. It is not an error, but this should be avoided as it may produce undefined behavior when used concurrently under the same storage key."
Is there a better way with nuxt/supabase to dynamically set the token after login and to have the client globally available across the app without creating a new one on each page?
From various sources it seems that the correct way to connect to supabase when using third party auth solutions such as Stytch or Clerk is to provide a jwt token in the bearer authorization as follows using the @supabase/supabase-js package:
import { createClient } from "@supabase/supabase-js";
const supabase = createClient(
config.public.supabaseUrl,
config.public.supabaseKey,
{
global: {
headers: {
Authorization:
Bearer ${jwtToken},},
},
},
);
It works but I call the above in multiple pages and see the "Multiple GoTrueClient instances detected in the same browser context. It is not an error, but this should be avoided as it may produce undefined behavior when used concurrently under the same storage key."
Is there a better way with nuxt/supabase to dynamically set the token after login and to have the client globally available across the app without creating a new one on each page?