K
Kinde•4mo ago
Jacob

Has anyone got Kinde Auth working with the Supabase browser client?

We need multi tenancy and somewhat advanced role and permission based RLS policies. Because of this, we were hoping to use Kinde for our identity provider alongside Supabase. I've been able to get server-side requests working by following the Kinde and Supabase blog, however we rely heavily on the supabase client-side SDK as well so need this to work if we are to switch to Kinde auth The createBrowserClient function from Supabase does allow you to pass in a custom access token, 
 return createBrowserClient<Database>(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
      {
        accessToken: async () => {
          // return kinde token here
        },
      },
    );
 return createBrowserClient<Database>(
      process.env.NEXT_PUBLIC_SUPABASE_URL!,
      process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
      {
        accessToken: async () => {
          // return kinde token here
        },
      },
    );
but the accessTokenRaw I obtain from useKindeBrowserClient is unsigned and therefore does not work. Does anyone have this working for their app? Are there any suggestions on how this can be setup, without needing to proxy all our requests through an api route and sign + attach the token to the request? Because this would remove a large part of the benefit of using supabase with their nice client SDKs Appreciate any insights! Thanks
3 Replies
Roshan
Roshan•4mo ago
Hey Jacob,

Awesome to hear that you have been following our guide. Could you confirm with me that you have done the following?

In your Supabase setup, ensure you've configured the JWT secret correctly.

1.  Copy your Kinde ​Client Secret​ from your application settings
2.  In Supabase, navigate to ​JWT Settings​ and select ​Generate a new secret​, then ​Create my own secret
3.  Paste your Kinde Client Secret into the ​Custom JWT secret​ field and select ​Apply new JWT secret

This configuration allows Supabase to verify Kinde tokens properly. Once configured, your client-side approach should work: 
const { accessTokenRaw } = useKindeBrowserClient() ;

return createBrowserClient<Database>(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  {
    accessToken: async () => {
      return accessTokenRaw; // This should now work with proper JWT secret config
    },
  },
) ;
const { accessTokenRaw } = useKindeBrowserClient() ;

return createBrowserClient<Database>(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  {
    accessToken: async () => {
      return accessTokenRaw; // This should now work with proper JWT secret config
    },
  },
) ;
The accessTokenRaw method returns the raw JWT token string, which should be properly signed by Kinde and verifiable by Supabase once you've configured the shared JWT secret.
Jacob
JacobOP•4mo ago
Hey Andre thanks for getting back to me. I did make the above Custom JWT Secret changes which was how I was able to get the server-side auth working, but for some reason accessTokenRaw was not working client side. I'll try again and let you know how it goes A follow up question please - is it possible to access the token client-side outside of a react component? As far as I can tell the only way is to use useKindeBrowserClient but obviously this can only be used within other hooks/components
Krish - Kinde
Krish - Kinde•4mo ago
Hey Jacob, Thanks for the update . Glad to hear server-side is working with the Custom JWT Secret in place. Regarding your follow-up: You're spot on , useKindeBrowserClient is currently the only supported way to access tokens client-side, and because it's a React hook, it must be used within a React component or another hook. We're actively exploring ways to improve this developer experience in future updates to the SDK. Feel free to reach out if you have more questions on this.

Did you find this page helpful?