Supabase auth issue while deployed to cloudfront
I have Nuxt app with supabase module for auth. It work fine locally. But when the app is deployed to cloudflare with nuxthub i get issue. When i reload the page which is restricted for logged in user, when i'm logged in, the page is redirected to login and then right after that to home page, seems like some ssr issue or something like that. What can be the issue?
2 Replies
Hi @Adante. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources, there are a few potential issues that could be causing the problem you're experiencing with Supabase authentication when deployed to Cloudflare. Here's what might be happening:
1. CDN Proxy Issues: Cloudflare's "Minification and Security Options" can sometimes interfere with Nuxt applications. As mentioned in the Nuxt deployment documentation, you should ensure that certain Cloudflare options are disabled to prevent unwanted side effects. Specifically:
- Disable "Rocket Loader™" under Speed > Optimization > Content Optimization
- Disable "Mirage" under Speed > Optimization > Image Optimization
- Disable "Email Address Obfuscation" under Scrape Shield
2. Supabase Redirect Behavior: The Supabase module for Nuxt has a default behavior of redirecting to the login page for non-authenticated users trying to access guarded routes. This could explain the redirect to the login page you're experiencing. As per the Supabase module documentation, you can disable this behavior if needed.
3. SSR and Client-Side Hydration: The issue you're describing, where the page reloads and redirects multiple times, could be related to differences between server-side rendering and client-side hydration. This is particularly relevant when dealing with authentication states.
To troubleshoot and potentially resolve the issue:
1. Check your Cloudflare settings and ensure the mentioned options are disabled.
2. Review your Supabase configuration in
nuxt.config.ts. You might need to adjust the redirectOptions or disable automatic redirects if they're causing issues in your deployed environment.
3. Ensure that your authentication checks are consistent between server-side and client-side code.
4. Consider implementing a more robust auth middleware that handles both SSR and client-side scenarios, similar to the example provided in this Stack Overflow answer.
If the issue persists after trying these steps, you may need to further investigate the specific behavior in your deployed environment, possibly by adding more detailed logging or debugging to understand the exact flow of authentication and redirects.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@384473053679190016> Kapa.ai is still learning and improving, please let me know how I did by reacting below.