Search code examples
node.jsazurenuxt.jssupabaseazure-static-web-app

Azure Static Web App unable to connect to Supabase

So, I have a static web app hosted on Azure (learning purposes), and the same app hosted on Vercel. Both of them point to the same Supabase project.

I have had in the past issues with Vercel caching prisma artifacts and Azure actually displaying the content from the PostGres DB. Now, I have deployed (changing my scripts to generate) and the issue appears to have switched, although now when I try to login on my Azure app, I get:

AuthRetryableFetchError: URL is not valid or contains user credentials.

This has all started after I updated a yml file (which fixed an Azure deployment issue), but then I had an apparent issue with the supabase variables I was useing on Azure. The Vercel app was loading content from supabase, but Azure doesn't. So, I deleted the variables on Azure, and re-entered them and now I have reached the error above.

I believe the error to be in Azure, although I am not 100% sure yet, but I'm struggling now ...

What I've tried:

  • ChatGPT
  • Redeploying the yml
  • Updating the Azure web app token
  • Removing Azure env variables and re-entering
  • Tested the same variables on the Vercel app
  • Tested the same branch, with the same env vars and some supabase project
Solution

  • The error message AuthRetryableFetchError: URL is not valid or contains user credentials shows that there is an issue with the URL or the user credentials.

    1. Check the Supabase credentials and CORS Settings.

    2. Verify the environment variables in Azure portal and check whether they are mapped correctly and match with the Supabase credentials.

    enter image description here

    1. Check the Azure deployment logs for any errors or warnings related to Supabase connectivity.

    2. Check the Azure AD authentication and authorization logs.

    enter image description here

    1. Check the Gateway logs and activity logs for any issues.

    enter image description here

    Use the below query (query reference from MSDoc) to check the application Gateway logs.

    AzureDiagnostics  
| where ResourceType == "APPLICATIONGATEWAYS" and OperationName == "ApplicationGatewayAccess" and httpStatus_d > 399  
| summarize AggregatedValue = count() by bin(TimeGenerated, 1h), _ResourceId  
| render timechart

    enter image description here

    For more information, check this blog.