N
Nuxt•7mo ago
Depka

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
DepkaOP•7mo ago
login.vue 
<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
handshake•7mo 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
DepkaOP•7mo 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
DepkaOP•7mo 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
handshake•7mo ago
ya that's fine, i get it are you going off of any docs about authenticating with google?
Depka
DepkaOP•7mo ago
What do you mean ?
handshake
handshake•7mo ago
Depka
DepkaOP•7mo ago
Yes already did everything in there, the authentication works ok The redirect is the problem
handshake
handshake•7mo 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
DepkaOP•7mo ago
Yea you need to create the credentials on cloud developer console to test that
handshake
handshake•7mo ago
handshake
handshake•7mo ago
jk
Depka
DepkaOP•7mo ago
:))
handshake
handshake•7mo ago
i'd suggest just playing around with the "watch(user..." with "watch(user?.value..." and maybe try without immediate: true?
Depka
DepkaOP•7mo 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…
handshake
handshake•7mo ago
yeah not sure if ionic would cause that issue or not. but i haven't messed with that in nuxt too much
Depka
DepkaOP•7mo ago
It's the only thing i can think of right now .... since it uses it's own router .... or maybe it's the supabase route guard problem ? don't know how to pinpoint it :/
manniL
manniL•7mo ago
You could debug contents of the supabase module to ensure "what is happening" e.g. by locally patching it in the node modules also maybe instead of the watch you could use a middleware 🤔
Depka
DepkaOP•7mo ago
Well that's the thing about the middleware, as far as i know, nuxt supabase module uses global middleware so you dont really need to write your own, it automatically redirects you to specified login page if you try to access any other route
Depka
DepkaOP•7mo ago
I believe it's this piece of code there https://github.com/nuxt-modules/supabase/blob/main/src/runtime/plugins/auth-redirect.ts#L8
GitHub
supabase/src/runtime/plugins/auth-redirect.ts at main · nuxt-module...
Supabase module for Nuxt. Contribute to nuxt-modules/supabase development by creating an account on GitHub.
Depka
DepkaOP•7mo ago
But really not sure as I'm not that well educated in all of this so just guessing Anyway, I have just created vanilla nuxt project and only installed supabase module and the redirect after successfull oauth works, so it must be a problem of ionic i will try to add ionic now to see if it gets broken and try not to use the "tabs" just for the sake of simplicity I will happily update docs or prepare a PR just so no one after would need to spend a week figuring this out @manniL / TheAlexLichter Yes it's the ionic module, first few times it worked ok, now it's making the same issue. when i removed the module from nuxt config and rewrote everything back so i dont use the ion components, it went back to functional state
manniL
manniL•7mo ago
then it might be worth reporting that in the ionic module Also keep in mind:
⚠️ nuxtjs/ionic is currently a work in progress. ⚠️
Depka
DepkaOP•7mo ago
Do you know any other vue css framework that is good for creating app like views ? :/ @manniL / TheAlexLichter would be great if i could induce this behavior without the supabase oath so i can have it on stackblitz or something @manniL / TheAlexLichter just out of curiosity, does the order of modules in nuxt config matter ?
manniL
manniL•7mo ago
it can, depending on the modules e.g. if one module changes the same as another or provides certain functionalities
Depka
DepkaOP•7mo ago
well im pretty confused now, sometimes it works sometimes it doesnt, when i switched the order of the modules it started to behave properly, now when i switched the order back it is still working .....just why ... this is a nightmare to reproduce just want to throw the computer out of the window and go farming or something because of this unpredictable sh!t ok i give up, i dont know how to even describe the issue, i seriously doubt that anyone will ever go through the hassle of creating all the accounts just do debug it, the behavior is some black box that behaves randomly, no logs, nothing.......guess i will just learn react and next.js instead of wasting my time with this.....week gone and all i do is solving something that should work out of the box .... seriously breaks my heart to go out of the vue ecosystem but i just wanted to get sh!t done ..... not learn guts of every library module not understanding 90% of it
TechAkayy
TechAkayy•7mo ago
Not related to Nuxt+Ionic, but I just updated the Photo gallary tutorial ionic app to the latest v8 that uses plain Vue+Vite - https://github.com/pinegrow/photo-gallery-ionic-vue. This does use ion-router-outlet, but how this translates into a Nuxt app, I'm not sure..
TechAkayy
TechAkayy•7mo ago
May be use https://nuxt.com/docs/guide/recipes/custom-routing to match with router.ts in a typical Vue app?
Nuxt
Custom Routing · Recipes
In Nuxt 3, your routing is defined by the structure of your files inside the pages directory. However, since it uses vue-router under the hood, Nuxt offers you several ways to add custom routes in your project.
Depka
DepkaOP•7mo ago
yea, that's what i am doing now, got rid of nuxt and just started new project simply with ionic vue tab starter template wanted to use nuxt, doesnt work, moving on
Want results from more Discord servers?
Add your server