Currently in the process of developing a project for educational purposes, utilizing Angular16 and Supabase as the backend technology. I have successfully implemented user sign-ins with Github, Google, and email (the method used for signing in doesn't affect the issue since it persists across all providers).
The problem at hand is as follows, I will provide the code snippet and then elaborate:
login.component.ts:
async signInWithGithub(): Promise<void> {
try {
this.loading = true;
this.supabase.signInWithGithub()
.then(() => {
this.router.navigate(['login']);
})
.catch((error) => {
if (error instanceof Error) {
alert(error.message);
}
})
.finally(() => {
this.loading = false;
});
} catch (error) {
if (error instanceof Error) {
alert(error.message);
}
} finally {
this.loading = false;
}
}
This code is intended to navigate once the authentication process is successfully completed. However, what actually occurs is that the navigation happens prematurely, and then after some time, the authentication finishes and redirects back to the login component.
Hence my query: How can I ensure the navigation only takes place upon completion of authentication?
All the pertinent code has been provided, although Supabase handles most of the functionality.
supabase.service.ts:
signInWithGithub(): Promise<OAuthResponse>{
return this.supabase.auth.signInWithOAuth({ provider: 'github' });
}
The primary method signInWithOauth() also delivers a Promise<OAuthResponse>.
EDIT: When signing in with Github (or any other provider), certain query parameters are appended to the URL followed by a page refresh.