Kinde, Supabase, and React Native
Hi, I have a full NextJS app which is using supabase and kinde. I did something hacky where I never enabled RLS on the tables, but instead I checked the logged in user on every server action to make sure the user was correct and had the right permissions. Not the best approach but it worked.
I am now working on making my nextJS application into a React Native app. However, seems like the hacky thing I was doing is probably not the best way forward. I'm exploring the docs but it doenst seem straightforward on integrating React Native, Kinde and Supabase. Is the main way to get around this via the JWT token? Can't find any other solutions.
4 Replies
Actually, React Native is a frontend app, so the client secret path doesnt work anyways from my understanding.
Hi Pranay,
Thanks for reaching out. Based on your description, while your previous approach of manually checking the logged-in user on each server action can work, it’s not the most robust or secure solution for production.
For your React Native app, the recommended approach is to leverage the JWT token issued by Kinde. Here’s how you can streamline your integration:
1. Set up Row Level Security on your Supabase tables. With RLS enabled, you can define policies that automatically verify that a request’s JWT token (typically the
sub claim) matches the intended user. This offloads security checks to the database layer and minimizes manual intervention.
2. After a user authenticates via Kinde, you’ll receive a JWT token. Pass this token to your Supabase client. Supabase can then validate the token against your RLS policies, ensuring that only authorized users can access or modify data.
3. This approach is more secure and maintainable compared to manually checking user credentials on every server action. It also aligns with best practices by using built-in security features provided by Supabase and Kinde.
In summary, yes—the main way to move forward is via the JWT token. By enabling RLS and configuring your Supabase client to use the JWT from Kinde, you’ll achieve a more robust and secure integration.
Let me know if you need any further details or have additional questionsHey @Ages , appreciate your quick reply. Are there any docs on this process. Stuck on the JWT verification via RLS policies. Any resources would help!
This is the info I'm getting from GPT:
In a client-side app like React Native, you’re not supposed to (and can’t) embed a secret. The “JWT secret” is a server‑side credential used to sign and verify tokens. In your case, Kinde issues a token without a client secret on the front end, so you need to adjust your Supabase backend to trust Kinde’s tokens rather than trying to regenerate or match a secret on the client.
Here’s what you can do:
Configure Supabase to Accept External Tokens:
In your Supabase project settings (in the Supabase dashboard), you can configure custom JWT settings so that it validates tokens issued by an external provider like Kinde. If Kinde uses an RS256 signature, for example, you should use Kinde’s public key or a JWKS endpoint. This tells Supabase to trust the tokens coming from Kinde without needing to generate a new secret on the client side.
Seems about right
Any thoughts on how to go about setting up the latter? @Ages
Hi Pranay,
I’ll take a look on my side and test using the token issued by Kinde directly in Supabase. In the meantime, as a temporary solution, you might consider setting up a server-side proxy. This proxy would:
- Validate the JWT: Use Kinde’s public key (or JWKS endpoint) to verify the token.
- Forward Requests: Once validated, forward the request to Supabase with a secure server-side credential.
This approach lets you bridge the gap while you work on integrating external JWT validation directly in Supabase via its custom JWT settings.
Please feel free to ask if you have any questions or need further clarification on this temporary setup