barrykooij commented 1 year ago

Bug report

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

Describe the bug

When implementing supabasejs (which includes this lib) in a clean ReactJS application, the initialize process is stuck in a "forever await" state when trying to load tokens from the URL (social login, magic link, forgot password).

In the __loadSession function, there is an await for the initialize promise if the call is not made from within the initialize StackGuard. https://github.com/supabase/gotrue-js/blob/c6141010e0589bec1466e8eacb3b19f956d47dce/src/GoTrueClient.ts#L927 I suspect this to be to make sure this function is never called before the initialize function has finished.

On Chrome (on Mac M2), the call from within the _initialize StackGuard returns false on isInStackGuard('_initialize') (when it's supposed to return true. This causes the function to await the initializePromise, which can never be set because that's what the function was trying to do.

I've added some console.log calls to the helpers.ts when a StackGuard is created and checked (isInStackGuard), to see if they are created correctly. This is the console log:

GoTrueClient@0 2023-07-23T09:40:57.674Z #_acquireLock begin -1
helpers.ts:365 CREATE stackGuard: ENV_CHECK
helpers.ts:340 FOUND stackGuard: ENV_CHECK
helpers.ts:345 NOT FOUND stackGuard: _acquireLock
GoTrueClient.ts:236 GoTrueClient@0 2023-07-23T09:40:57.684Z #_acquireLock lock acquired for storage key sb-hidden-auth-token
helpers.ts:365 CREATE stackGuard: _acquireLock
helpers.ts:365 CREATE stackGuard: _initialize
GoTrueClient.ts:236 GoTrueClient@0 2023-07-23T09:40:57.684Z #_initialize() begin is PKCE flow false
GoTrueClient.ts:236 GoTrueClient@0 2023-07-23T09:40:57.684Z Getting session from URL.
GoTrueClient.ts:236 GoTrueClient@0 2023-07-23T09:40:57.684Z #_useSession begin
helpers.ts:345 NOT FOUND stackGuard: _useSession
GoTrueClient.ts:236 GoTrueClient@0 2023-07-23T09:40:57.684Z #_acquireLock begin -1
helpers.ts:345 NOT FOUND stackGuard: _acquireLock
GoTrueClient.ts:236 GoTrueClient@0 2023-07-23T09:40:57.684Z #_acquireLock lock acquired for storage key sb-hidden-auth-token
helpers.ts:365 CREATE stackGuard: _acquireLock
helpers.ts:365 CREATE stackGuard: _useSession
GoTrueClient.ts:236 GoTrueClient@0 2023-07-23T09:40:57.684Z #__loadSession() begin
GoTrueClient.ts:236 GoTrueClient@0 2023-07-23T09:40:57.684Z stackGuardsSupported() true
helpers.ts:345 NOT FOUND stackGuard: _initialize

What is weird is that you can see it creates helpers.ts:365 CREATE stackGuard: _initialize and then in __loadSession it can't find this StackGuard helpers.ts:345 NOT FOUND stackGuard: _initialize.

To Reproduce

Create a clean ReactJS application and install supabasejs. The actual React files are not even needed to reproduce but it's the env I'm working in.

In the main.tsx just put:

const supabase = createClient("REPLACE_URL", "REPLACE_KEY");

Use a magic link or social login link to test. The Supabase client needs to attempt to load tokens from the URL to crash.

Expected behavior

I expect the tokens in the URL to be used to load the user session. In more technical terms, I expect isInStackGuard('_initialize') to return true when in the _initialize StackGuard.

Screenshots

If applicable, add screenshots to help explain your problem.

System information

OS: MacOS
Browser (if applies): Chrome Version 115.0.5790.102 (Official Build) (arm64)
Version of supabase-js: 2.26.0, gotrue-js version 2.45.0 (manually downloaded. This solved issues in Safari and FireFox, works correctly in those 2 browsers now).

j4w8n commented 1 year ago

I believe the auth team is looking into this. Thanks for the detail!

hf commented 1 year ago

Hey what do you use to build your app? Next.js? Other framework? If you have tsconfig file I'd love to see it.

barrykooij commented 1 year ago

It’s “regular” plain react. But in the example I shared I don’t even use react. I’m not at the computer atm, will share tsconfig later. But this is pure frontend.

hf commented 1 year ago

I'd love to see what else is going on with the supabase.auth library in your app. I don't think it has to do with _initialize stack guards.

barrykooij commented 1 year ago

Ok, back at computer.

tsconfig.json

{
    "compilerOptions": {
        "target": "ESNext",
        "useDefineForClassFields": true,
        "lib": ["DOM", "DOM.Iterable", "ESNext"],
        "allowJs": false,
        "skipLibCheck": true,
        "esModuleInterop": false,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "ESNext",
        "moduleResolution": "Node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx"
    },
    "include": ["src"],
    "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.js

{
  "compilerOptions": {
    "composite": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './src'),
        },
    },
});

package.json

{
    "name": "myapp",
    "private": true,
    "version": "0.0.0",
    "type": "module",
    "scripts": {
        "dev": "vite --force",
        "build": "tsc && vite build",
        "preview": "vite preview"
    },
    "dependencies": {
        "@emotion/react": "^11.10.6",
        "@popperjs/core": "^2.11.6",
        "@reduxjs/toolkit": "^1.8.5",
        "@supabase/supabase-js": "^2.26.0",
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "@types/jest": "^27.5.2",
        "@types/node": "^16.11.64",
        "@types/react": "^18.0.21",
        "@types/react-dom": "^18.0.6",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-popper": "^2.3.0",
        "react-router-dom": "^6.4.2",
        "react-scripts": "5.0.1",
        "typescript": "^4.8.4",
        "web-vitals": "^2.1.4",
        "yup": "^0.32.11"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.3",
        "@tailwindcss/typography": "^0.5.7",
        "@types/react": "^18.0.27",
        "@types/react-dom": "^18.0.10",
        "@vitejs/plugin-react": "^3.1.0",
        "autoprefixer": "^10.4.12",
        "i18next": "^21.10.0",
        "i18next-browser-languagedetector": "^6.1.8",
        "i18next-http-backend": "^1.4.4",
        "postcss": "^8.4.17",
        "react-animate-height": "^3.0.4",
        "react-i18next": "^11.18.6",
        "react-perfect-scrollbar": "^1.5.8",
        "tailwindcss": "^3.3.2",
        "typescript": "^4.9.3",
        "vite": "^4.1.0"
    }
}

main.tsx

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

const supabase = createClient("https://barry.supabase.co", "key);

Couldn't upload a zip of my @supabase npm folder, so I just created a new public repository for it haha. You can see it here: https://github.com/barrykooij/my-supabase-npm-folder/tree/main/%40supabase

silentworks commented 1 year ago

I'm getting more or less the same behavior as @barrykooij in my test app. You can set it up locally to see that the password recovery steps aren't working as expected (you will need to remove the flowType: 'pkce' from the src/lib/db.ts file first).

https://github.com/supabase-community/supabase-by-example/tree/main/reset-flow/react

silentworks commented 1 year ago

@barrykooij I think we found the issue and are currently testing out a fix that we will get released soon.

silentworks commented 1 year ago

@barrykooij the latest release of the @supabase/supabase-js library should resolve this issue. Please test and let us know if the issue has now been fixed.

hf commented 1 year ago

Will be fixed with #757.

barrykooij commented 1 year ago

Thanks for the quick work, I'm going to test this when I'm back in the office!

HadiAlMarzooq commented 1 year ago

@barrykooij any updates though?

barrykooij commented 1 year ago

Sorry that it took me so long to test, had some deadlines. Just tested this with version 2.33.2 and it all seems to working now!

Thanks a lot!

supabase / auth-js

__loadSession not in _initialize StackGuard on Chrome MacOS #744

Bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information