I'm trying to set up authentication in Supabase using GitHub OAuth.
The issue is that after clicking the login button, nothing happens!
when I try to access a restricted link I am redirected to the login page, so the url looks like this "http://localhost:3000/login?redirectTo=/aaaaa/bbbb/cccc/ddddd/eeeeeee"
login.vue file:
<template>
<div class="prose w-full max-w-2xl h-9">
<h1>Log in to {{ title }}</h1>
<button
class="bg-blue-600 text-white font-bold py-2 px-4 rounded"
@click="login"
>
Log in with Github
</button>
</div>
</template>
<script setup lang="ts">
const { title } = useCourse();
const { query } = useRoute();
const supabase = useSupabaseClient();
const user = useSupabaseUser();
watchEffect(async () => {
if (user.value) {
await navigateTo(query.redirectTo as string, {
replace: true,
});
}
});
const login = async () => {
const redirectTo = `${window.location.origin}${query.redirectTo}`;
console.log('redirectTo', redirectTo);
const { error } = await supabase.auth.signInWithOAuth({
provider: 'github',
options: { redirectTo: redirectTo },
});
if (error) {
console.log(error);
}
};
</script>
Supabase config in the nuxt.config.ts
supabase: {
url: process.env.SUPABASE_URL,
key: process.env.SUPABASE_KEY,
redirectOptions: {
login: '/login',
callback: '/confirm',
exclude: ['/*'],
},
},
I also tried to add the url in the supabase dashboard but nothing happens
I just had to create a confirm.vue page and it worked