Login/Signup on web not working

[fabios9702]

I'm using supabase for my flutter app, and I've started the web app, the problem is that when I login (with magic link or provider) the user is not authenticated and if I refresh the page there is the error 'no access_token detected', I've tried also to download your flutter project and run on web, and I ha the same Issue.

I'm not passing redirect url to the Auth option.

[dshukertjr]

Hi @fabios9702,

Thank you for opening this issue. Are you using the supabase-flutter 1.0.0-dev.1 or dev.2 version?

[fabios9702]

@dshukertjr I'm using the latest stable release, supabase_flutter 0.3.3

[dshukertjr]

@fabios9702 Thanks for letting me know! Would you be able to provide a simple code that you have written to reproduce this?

[fabios9702]

@dshukertjr Basically when I tap on the button I call this function that sends the magic link to my email:

await supabase.auth.signIn( email: emailController.text , options: AuthOptions( redirectTo: kIsWeb ? null : 'io.supabase.flutterquickstart://login-callback/'));

When I open then link with chrome, where the web app is running, it opens a new blank page, if I refresh the initial page I have the error

[dshukertjr]

@fabios9702
On your login page, are you using SupabaseAuthState class? Also, you mentioned that when you refresh the initial page, it does the user is not signed in, but it is signed in on the page that was opened by clicking the link in the email?

[fabios9702]

@dshukertjr
Yes I'm using the SupabaseAuthState, in fact in the mobile app everything works fine. When I refresh the pages, in both pages the the AuthState calls the onAuthenticated() function, but then there is the error of no access_token

[dshukertjr]

@fabios9702 Do you have a repo that I can take a look maybe?

[fabios9702]

@dshukertjr
I've tried also with the code of supabase flutter

[dshukertjr]

@fabios9702 Is it this one that you tried?
https://supabase.com/docs/guides/with-flutter

[fabios9702]

@dshukertjr
yes, and I've downloaded this repository

[dshukertjr]

@fabios9702
I was able to reproduce this as well. There might be some issues on the stable version used with Flutter web. A lot of the APIs on the stable version will be old pretty soon, so would you want to test out the new version of supabase-flutter?

Here is the same example app built using the new SDK:
https://github.com/supabase-community/supabase-flutter-quickstart/tree/next

[fabios9702]

@dshukertjr

I've tried with the supabase_flutter 1.0.0-dev.2 version and has the same behavior

[deliqs]

I had the same problem. My problem was caused by incorrect settings in the Authentication section in the Supabase dashboard.

What URL do you receive when you log in? I had something like HOSTNAME/#/23%access_token. This way the query parameter for the access_token was 23%access_token and not access_token.

[dshukertjr]

@deliqs So in your case, how did you solve it?

[dshukertjr]

@fabios9702
Are you able to create a loom video or something to describe what exactly is happening? I can't seem to reproduce it with the newest SDK.

Did you try this one?
https://github.com/supabase-community/supabase-flutter-quickstart/tree/next

[deliqs]

@dshukertjr

I mistakenly followed parts of the suggestions here.
So I added a redirect url that was something like "example.tld/%23". I didn't add any path after that. This causes the login to redirect to something like "example.tld#/%23access_token.....".

Supabase's uri parser for deep linking then saw %23access_token as a query parameter. So it failed to parse the value, hence "no access_token detected". My fix was removing the "/%23" part of the redirect url. I assume @fabios9702 has something similar.

[fabios9702]

@deliqs I've tried but I have still the same Issue.

@dshukertjr here is the video of the behavior that I have. Sorry for the quality but I had to compress it.

Registrazione.schermo.2022-08-05.alle.16.37.26.video-converter.com.mp4

[dshukertjr]

@fabios9702 Could I take a look at the source code of this project? If not, could you try it with this one and see if it works? Could you record it and share it if it does not work either?

[fabios9702]

@dshukertjr
Unfortunately the problem is still there, I've already tries with the link you provided.

[PcolBP]

Removing hash from url helps me, try to implement it just like here

[fabios9702]

I've also tried also to remove the hash, but the problem is still there

[fabios9702]

@PcolBP where did you remove the has? from the html file, from redirect url passed int he su-abase function or in the su-abase console?

[PcolBP]

@fabios9702 I removed hash by using this package https://pub.dev/packages/url_strategy give it a try.

[fabios9702]

@PcolBP have you set some configuration, I've added the function setPathUrlStrategy(); to main, but there is always the hash in the url and so is not working

[PcolBP]

@fabios9702 are you using some route package or something? Navigator 1.0, 2.0? Tell more info about your setup.

In my project I do use auto_route which is based on navigator 2.0. Haven't setup anything else.

[fabios9702]

@PcolBP No, I'm not using any packages, only Navigator, the lactone embedded in flutter 3.0.5

[PcolBP]

@fabios9702 So u're not using MaterialApp.router or anything like that related to Navigator 2.0 - .router? If so, you won't be able to remove hash from URL.

[fabios9702]

@PcolBP ok, thanks, I'll try with the one you are using, auto_route, and let you know, thanks for the help :)

[PcolBP]

@fabios9702 I think that better choice would be go_router since it doesn't require build_runner so that save your time with every build. And it's maintained by flutter right now. Whatsoever in go_router you can set up out of box pathStrategy like below:

So no need for implementing another package.

[fabios9702]

@PcolBP I've tried with go_router, but the problem is still there

[PcolBP]

Which version of package are you using? I'm asking because I've delivered app with auth on the latest dev release => 1.0.0-dev.4 @fabios9702

[fabios9702]

@PcolBP I've tried with the stable 4.2.9

[PcolBP]

@fabios9702 I'm asking about supabase version.

[fabios9702]

@PcolBP ah ok, BTW I'm using the last stable version of supabase. I'll try with the dev one

[fabios9702]

@PcolBP I've tried, but it's still not working. I don't know what to try next. @dshukertjr do you know if there are any other solution or if it's a known supabase problem that needs to be solved at this point? I'm blocked with the web part of the app because of this

[dshukertjr]

@fabios9702 Hmm, let's see.

Just in case it's a backend issue, would you be able to create a new Supabase project and see if the same issue persists? If it does, would you be able to share a minimal code to reproduce this issue?

[fabios9702]

@dshukertjr Seems that I solved the problem, now the login it's working I'll let you know if there will be other problems.

Thanks 😊

[PcolBP]

@fabios9702 could you share the solution with us?

[dshukertjr]

@fabios9702 Glad to hear that it has been resolved. If I understand it correctly, you didn't change any of your code, but it started working properly? I apologize if it was a server issue.

For now, I would close this issue!

[fabios9702]

@dshukertjr Correct, thanks 😁