Nuxt•4mo ago

Stuck on confirm page after OAuth redirect(Nuxt/Supabase/Ionic)

Hi, I've started to build a project with Nuxt, Supabase and Ionic. Since i want to build a PWA in the end of this journey i want my users to sign in with OAuth. So I did the necessary steps of creating Supabase project, enabled google provider, generated credentials on google cloud developer console etc. Since nuxt supabase module requires to create login and confirm pages i mostly copy pasted the code from the nuxt/supabase docs. Now the authentication works ok, after that i'm correctly redirected to confirm page and then I'm stuck there, no error in console or server console. So i've tried to use the debugger to see the result of navigateTo which is undefined ...when i went deeper i saw that on checking the routeguards I'm getting the Navigation cancelled with new navigation error. So i thoght....ok maybe i need to use the ionRouter instead of navigateTo. But that was working the same as the navigateTo method ....still stuck on the confirm page. I'm really out of ideas and no one seems to care in the discussion channel, so I'm trying it here, before i completely lose my patience with nuxt and move to some framework that isn't bugged with incomplete docs and not responsive community :( Sorry to write it like this, but have no other option....

28 Replies

Depka•4mo ago

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Dogiary</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <div class="min-h-full flex flex-col justify-center sm:px-6 lg:px-8">
        <h2 class="my-6 text-center text-3xl font-extrabold">
          Sign in to your account
        </h2>
        <div class="px-6">
          <ion-button expand="full" class="h-[60px]" @click="signIn">
            <ion-icon slot="start" :icon="ioniconsLogoGoogle"></ion-icon>
            Google
          </ion-button>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

<script setup>
const supabaseClient = useSupabaseClient()
const signIn = () => {
  supabaseClient.auth.signInWithOAuth({
    provider: "google",
    options: {
      redirectTo: window.location.origin + '/confirm',
    }
  })
}
</script>

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Dogiary</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <div class="min-h-full flex flex-col justify-center sm:px-6 lg:px-8">
        <h2 class="my-6 text-center text-3xl font-extrabold">
          Sign in to your account
        </h2>
        <div class="px-6">
          <ion-button expand="full" class="h-[60px]" @click="signIn">
            <ion-icon slot="start" :icon="ioniconsLogoGoogle"></ion-icon>
            Google
          </ion-button>
        </div>
      </div>
    </ion-content>
  </ion-page>
</template>

<script setup>
const supabaseClient = useSupabaseClient()
const signIn = () => {
  supabaseClient.auth.signInWithOAuth({
    provider: "google",
    options: {
      redirectTo: window.location.origin + '/confirm',
    }
  })
}
</script>

confirm.vue

<script setup lang="ts">
const user = useSupabaseUser()

watch(user, () => {
  if (user.value) {
    return navigateTo('/')
  }
}, { immediate: true })
</script>
<template>
  <ion-page>
    <ion-content>
      Authenticating...
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
const user = useSupabaseUser()

watch(user, () => {
  if (user.value) {
    return navigateTo('/')
  }
}, { immediate: true })
</script>
<template>
  <ion-page>
    <ion-content>
      Authenticating...
    </ion-content>
  </ion-page>
</template>

handshake•4mo ago

is there anyway to get a slim repo/stackblitz of this? Also have you tried "preserving logs" in the dev tools "console" or "network" tabs? does "user" ever come back with a value? is the user a reactive property?

Depka•4mo ago

Im not sure about the stackblitz, cause for the supabase auth to work, you need the supabase url and key which i dont know if i can put there, lemme check Anyway, the user value is present with all the info from google like name, avatar_url etc so it's there definitely, if i add simple console.log before the navigateTo i can see this printed immediately after getting to that confirm page Also i would need to add your email as an allowed user for the google credentials/app

Depka•4mo ago

Anyway repo is here https://github.com/DepkaCZ/dogiary-ionic

GitHub

GitHub - DepkaCZ/dogiary-ionic

Contribute to DepkaCZ/dogiary-ionic development by creating an account on GitHub.

handshake•4mo ago

ya that's fine, i get it are you going off of any docs about authenticating with google?

Depka•4mo ago

What do you mean ?

handshake•4mo ago

like one of these? https://supabase.com/docs/guides/auth/social-login#set-up-a-social-provider-with-supabase-auth

Supabase

Social Login | Supabase Docs

Logging in with social accounts

Depka•4mo ago

Yes already did everything in there, the authentication works ok The redirect is the problem

handshake•4mo ago

oh i was just asking bc i was trying to test your repo locally, but i dont have google auth provider supported on my end...

Depka•4mo ago

Yea you need to create the credentials on cloud developer console to test that

handshake•4mo ago

https://tenor.com/view/wine-stressed-drink-gif-16239217108156766434

Tenor

handshake•4mo ago

Depka•4mo ago

:))

handshake•4mo ago

i'd suggest just playing around with the "watch(user..." with "watch(user?.value..." and maybe try without immediate: true?

Depka•4mo ago

Will try but as ive said, the user gets populated, cookies are created so i dont know it seems like its a bug…but from what module ? Guess i will try to get rid of ionic to see if the bug is not there…

Gaming

Programming

Stuck on confirm page after OAuth redirect(Nuxt/Supabase/Ionic)