cli icon indicating copy to clipboard operation
cli copied to clipboard

Local Supabase Doesn't Auth Local Tokens

Open TylerSustare opened this issue 3 years ago • 10 comments

Bug report

Describe the bug

Using Supabase locally in my project works great to log in from the React Native app. However, I'm using a NestJS backend to authenticate tokens like the official NestJS authentication reference here https://github.com/doug-martin/nestjs-query. The tokens are not authenticated and my RN app always gets a 401 and never lets the request through.

My same setup works like a charm using my Supabase project credentials from https://app.supabase.io. It's just Supabase local tokens that always return a 401.

To Reproduce

In this repo (using this branch)

1a. run supabase start at the root of the repo 1b Yarn install in root of repo 1c Yarn install in server folder 2a. Update supabase keys in the supabase strategy 2b Add a new .env file with updated supabase keys like in sample.env 3a. Yarn start in the root of the project to run the expo project. Open iOS app - I haven't tested Android yet. 3b. Yarn start in server folder to start the backend 4 SignUp - go to i icon in the upper right 5 See modal

Expected behavior

Successful GQL response with local Supabase issued token.

Screenshots

Successful request - using remote Supabase creds

https://user-images.githubusercontent.com/10850753/139571058-bd6a663c-028e-4c28-84f0-eb8695544a65.mp4

Failed Request - using local Supabase creds

With this error.

{
  "graphQLErrors": [
    {
      "message": "Unauthorized",
      "extensions": {
        "code": "UNAUTHENTICATED",
        "response": {
          "statusCode": 401,
          "message": "Unauthorized"
        }
      }
    }
  ],
  "clientErrors": [],
  "networkError": null,
  "message": "Unauthorized"
}

https://user-images.githubusercontent.com/10850753/139571215-9b1e6a01-0ac9-4cc7-9ede-ee634239247a.mp4

System information

  • OS: macOS Big Sur
  • iOS with Expo React Native
  • Version of supabase-js: "@supabase/supabase-js": "^1.24.0",
  • Version of Node.js: v14.15.0

Additional context

  • Supabase strategy in my repo https://github.com/TylerSustare/preschool/blob/move-app-to-folder/server/src/auth/supabase.strategy.ts

  • The modal making the GQL request https://github.com/TylerSustare/preschool/blob/move-app-to-folder/screens/ModalScreen.tsx

  • Lovely emojis for making such an awesome suite of tools for an awesome service THANK YOU ✨ ❤️ 🤟 💘 🏅 😺 💯 ✨ ❤️ 🤟 💘 🏅 😺 💯 ✨ ❤️ 🤟 💘 🏅 😺 💯 ✨ ❤️ 🤟 💘 🏅 😺 💯 ✨ ❤️ 🤟 💘 🏅 😺 💯 ✨ ❤️ 🤟 💘 🏅 😺 💯 ✨ ❤️ 🤟 💘 🏅 😺 💯

TylerSustare avatar Oct 31 '21 06:10 TylerSustare

Hey, thanks! Will try to repro with the linked repo 👍

soedirgo avatar Oct 31 '21 08:10 soedirgo

👋 Hi @soedirgo have you been able to reproduce the issue? I can try to duplicate this it in a small react site instead of an expo RN app if it helps simplify it.

TylerSustare avatar Nov 08 '21 03:11 TylerSustare

Hey Tyler, sorry this took a while! I was able to reproduce the issue. I'm seeing these from the auth logs:

time="2021-11-09T15:19:23Z" level=info msg="request started" component=api method=GET path=/user referer= remote_addr="172.18.0.4:50948" request_id=b32314ac-bd52-475a-88e9-059d20727f1b

time="2021-11-09T15:19:23Z" level=info msg="401: Invalid token: signature is invalid" component=api error="401: Invalid token: signature is invalid" method=GET path=/user referer= remote_addr="172.18.0.4:50948" request_id=b32314ac-bd52-475a-88e9-059d20727f1b

time="2021-11-09T15:19:23Z" level=info msg="request completed" component=api duration=4995458 method=GET path=/user referer= remote_addr="172.18.0.4:50948" request_id=b32314ac-bd52-475a-88e9-059d20727f1b status=401

I'll give this a look. Thanks for bringing it up!

soedirgo avatar Nov 09 '21 15:11 soedirgo

Some updates:

  • seems like this affects the self host setup too - it has the same issue when I tried setting it up with this
  • it works fine if you run the app on the browser (haven't tested android)
  • when I tried clicking the Sign up button, it just stalls. The auth.users table wasn't populated with a new row either so the signup must not have been successful, though I saw no error message. onAuthStateChange doesn't trigger either, whereas with a hosted Supabase setup it triggers a SIGNED_IN event (probably related to the stalling).

I'm not familiar with Expo/RN, so a smaller repro on iOS would help, but I'd wager it's something to do with how the auth server is set up.

soedirgo avatar Nov 11 '21 07:11 soedirgo

@soedirgo Thank you for looking into this! I'll set up a small react repo with a tiny Nest server so it's even easier and put it in here when I'm done 😸

TylerSustare avatar Nov 18 '21 06:11 TylerSustare

@soedirgo Here is the simpler version with just a vite react setup and the minimal server code. Let me know if you have any issues 🤝

https://github.com/TylerSustare/supabase-local-auth/

TylerSustare avatar Nov 20 '21 08:11 TylerSustare

I tried the repo and it seems to work fine:

https://user-images.githubusercontent.com/31685197/143463210-21829137-04aa-4fa0-ad54-cf367d9434e2.mov

This is on the browser though, so doesn't rule out the possibility of mobile-specific issues.

soedirgo avatar Nov 25 '21 14:11 soedirgo

Oh my goodness, it is working fine in a web app 🤔 🤯

I'll try one more time to add an app folder to the repo https://github.com/TylerSustare/supabase-local-auth/ in order to run a react native mobile app with the exact same setup as the working web app. Thank you for your patience on this.

TylerSustare avatar Nov 26 '21 21:11 TylerSustare

So I added the /app folder to the top level and I have no idea why but the local supabase auth seems to be working swimmingly. I can't help but think that the original bug was due to a nested /server/supabase folder structure instead of each aspect of the project in its own folder

old structure - initial bug

react_native_app/
├── App.jsx
├── server/
│   ├── server.ts
│   ├── ormconfig.json
│   └── supabase/
│       └── wizardry.magic

project with working structure

/
├── app/
│   ├── App.tss
│   ├── expo.json
├── web/
│   ├── App.tsx
│   ├── style.css
├── server/
│   ├── server.ts
│   ├── ormconfig.json
├── supabase/
    └── wizardry.magic

https://user-images.githubusercontent.com/10850753/143671061-387d098b-1f6c-400f-becb-8cf2e4bf1407.mp4

TylerSustare avatar Nov 27 '21 06:11 TylerSustare

I'm not sure if this still needs to be addressed. There is a work around but I'm not sure if I'm any wiser about why 😅 @soedirgo feel free to close this issue, but it may be worth keeping around for the issue in the auth logs you mentioned.

TylerSustare avatar Apr 19 '22 14:04 TylerSustare