Supabase auth (google) not working properly
Problem
Bug report Describe the bug I've implement the supabase auth with google provider in a create-react-app enviroment. Now when i go through the signin process it redirects me to localhost with token instade of signin me in. To Reproduce Steps to reproduce the behavior, please provide code snippets or a repository: Bootstrap CRA and implement supabase auth Expected behavior A clear and concise description of what you expected to happen. Screenshots <img width="830" alt="Screenshot 2023-07-20 at 8 46 37 PM" src="https://github.com/supabase/supabase/assets/33357137/2e07a0dd-55bd-4946-810f-5a4f4c5ff808"> Initial Page <img width="837" alt="Screenshot 2023-07-20 at 8 47 02 PM" src="https://github.com/supabase/supabase/assets/33357137/d19044d2-491e-44dd-a0a1-ad315af588f2"> This is after is signed in with, it just sent me session information in url hast. But doesn't actually log me in. <img width="759" alt="Screenshot 2023-07-20 at 8 40 17 PM" src="https://github.com/supabase/supabase/assets/33357137/3da7ffbf-7d2f-40ff-a8e8-71b086c4a856"> I'm trying to get the user session but it doesn't returns anything. If applicable, add screenshots to help explain your problem. System information - OS: masOs - Browser chrome - Version of supabase-js: 2.26.0 - Version of Node.js: v20.3.1 One thing i've tried the same with Nextjs it worked fine. I'm not sure what is the issue here.
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix Supabase Google Auth Redirection Issue in CRA
The issue arises because the Supabase client is not properly handling the redirect after Google authentication. Instead of processing the session token, it is redirecting to the URL with the token in the hash fragment, which is not being captured or processed by the application.
Awaiting Verification
Be the first to verify this fix
- 1
Configure Supabase Auth Redirect URL
Ensure that the redirect URL for your Supabase project is correctly set to your application's URL. This is crucial for the authentication flow to work properly.
typescriptsupabase.auth.signIn({ provider: 'google' }) - 2
Handle Redirect in Your App
Add logic to your application to handle the redirect and extract the session token from the URL. Use the `onAuthStateChange` method to listen for changes in authentication state.
typescriptsupabase.auth.onAuthStateChange((event, session) => { if (session) { console.log('User is logged in!', session); } }); - 3
Update Your Sign-In Function
Modify your sign-in function to ensure it captures the session after the redirect. Use the `getSession` method to retrieve the current session after the redirect occurs.
typescriptconst { data: { session }, error } = await supabase.auth.getSession(); if (error) console.error('Error fetching session:', error); - 4
Test the Authentication Flow
Run your application and test the Google authentication flow. Ensure that after signing in, the user is redirected back to your application and logged in successfully.
Validation
Confirm the fix by performing the Google sign-in process. After signing in, you should be redirected back to your application without the token in the URL, and the user session should be correctly established.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep