cli
cli copied to clipboard
Local Supabase Doesn't Auth Local Tokens
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
✨ ❤️ 🤟 💘 🏅 😺 💯 ✨ ❤️ 🤟 💘 🏅 😺 💯 ✨ ❤️ 🤟 💘 🏅 😺 💯 ✨ ❤️ 🤟 💘 🏅 😺 💯 ✨ ❤️ 🤟 💘 🏅 😺 💯 ✨ ❤️ 🤟 💘 🏅 😺 💯 ✨ ❤️ 🤟 💘 🏅 😺 💯
Hey, thanks! Will try to repro with the linked repo 👍
👋 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.
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!
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 aSIGNED_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 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 😸
@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/
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.
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.
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
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.