How to handle third-party providers login?

[AndreaBarghigiani]

Hi all, I am really sorry if this sounds like a silly question and probably it is but I do not understand how I am supposed to work with an third-party providers.

Let me try to better explain the issue I am facing.

I am pretty new to React but I am trying to create a side project with it to better undestand it and I was thinking to use supabase for its database and authentication abilities. I am still experimenting with it but I thought to implement the Bitbucket auth since my team is using it.

The fact is that I do not know how to check if the user is logged in or not 😊

Let me explain since I have already found a workaround using setTimeout, it's silly but at least I get the user object 😃

Basically I have created an <Auth /> component that is supposed to show the login button if user is not logged in and the logout one otherwise. I think that I understand the reason, when component mounts simply the query fired from supabase.auth.user() didn't have the response yet so I faked the componentDidMount with useEffect with something like it:

React.useEffect(() => {
	setTimeout(() => {
		setUser(supabase.auth.user());
	}, 2000);
}, [setUser]);

setUser is the function that let's me update the Context and with the setTimeout it works but how am I supposed to make it work without it?

I understand that is more a React question on how to manage something like this but still if someone is able to help me out with this would be simply great. I am not looking for a perfect answer, even a link to an article/tutorial that will help me understand how am I supposed to handle this kind of situation (I open a new window for the login and got redirected back to the same page) would be amazing.

Thank you in advance and congratulation for this amazing project, can't wait to use it more and more!

[AndreaBarghigiani]

I was checking the Slack clone example and looking at _app.js seems to me that I should set the supabase.auth.onAuthStateChange() listener.

Am I maybe getting closer? 😊

Solution

Well looks like thanks from your examples I've been able to solve my doubts, in order to reference I am adding the useEffect that I am using just to give reference to other users that maybe could experience a similar issue.

React.useEffect(() => {
	const { data: authListener } = supabase.auth.onAuthStateChange(
		async (event, session) => {
			setUser(session?.user ?? null);
		}
	);

	// Cleanup function
	return () => {
		authListener.unsubscribe();
	};
}, [setUser]);

I am going to leave open the question just to see if anyone have a better answer and I'll select this in a couple of days.

[silentworks]

I don't know much React specifically but this is also how I use auth in my Svelte app. The supabase.auth.onAuthStateChange is the best way to go about it I think.