Wrong API key sent with network request

[garnetred]

Bug report

Here's the code for the Supabase client, which is in a separate file.

• I confirm this is a bug with Supabase, not with my own application.
• I confirm I have searched the Docs, GitHub Discussions, and Discord.

Describe the bug

I have a Vue app that uses Google OAuth for identification on a login page before directing the logged in user to the home page. I'm able to generate an access token successfully and have tested this token with the API key with no issues. However, when the network call is being sent to the /user route, the response is the following:

{
    "message": "Invalid API key",
    "hint": "Double check your Supabase `anon` or `service_role` API key."
}

The API key is indeed incorrect, in both staging and production environments. I can see the API key value, which is different for each environment but has remained the same otherwise after at least an hour of testing. These API key values are nowhere in my codebase, which uses environment variables to store the keys. They don't match any values I can find associated with a Supabase database (I have a production database and a staging database). I've used Postman to send the same network request with the right API key and a valid access token generated through this login flow and am able to authenticate that way. However, for some reason this API key value is being overridden before being sent to the /user endpoint. I have Row Level Security enabled and have the anon key stored in my environment variables.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

If you're using getSession in your code and OAuth, you can go through the auth flow like normal. Even though an access token is generated you should see a 401 error and the wrong API key in the request headers.

Code Snippets

Here's a code snippet of the login function:

    async checkIfLoggedIn() {
      const isExpired = this.checkIfExpiredSession();
      const env = useEnvironmentStore();
      if (isExpired) {
        this.logout();
        return null;
      }
      const { data } = await env.supabaseURL.auth.getSession();
      console.log("data", data);
      if (
        !isExpired &&
        data?.session &&
        data?.session?.["provider_token"] !== ""
      ) {
        this.isAuthenticated = true;
        return data.session;
      } else {
        this.isAuthenticated = false;
        return null;
      }
    },

My staging Supabase client, which is in a separate file.

import { createClient } from "@supabase/supabase-js";

const SUPABASE_URL = < staging url >;

export const supabaseStaging = createClient(
  SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_STAGING_API_KEY,
);

Expected behavior

If a user logs in successfully via Google, they should then be directed to the home page of this app.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

• OS: [e.g. macOS, Windows]: macOS
• Browser (if applies) [e.g. chrome, safari]: Brave and Firefox
• Version of supabase-js: [e.g. 6.0.2]: 2.0.5
• Version of Node.js: [e.g. 10.10.0]: 18.20.4

Additional context

I didn't have any issues with this exact same code until trying it today. It worked perfectly a month ago; I'm not sure what changed.

[garnetred]

I'm closing this because it's been resolved, although I'm still not sure why the wrong API key was being sent over. I removed the path name from the Site URL listed in the URL configuration in the Authentication section. I also had the same URL followed by a hash symbol listed in the redirect URL's in the same section (ex. www.domain.com/#) and I removed that as an option. After making these two changes login works as expected.