diff --git a/apps/docs/content/guides/getting-started/tutorials/with-ionic-vue.mdx b/apps/docs/content/guides/getting-started/tutorials/with-ionic-vue.mdx
index baff725b244..fcf2908a826 100644
--- a/apps/docs/content/guides/getting-started/tutorials/with-ionic-vue.mdx
+++ b/apps/docs/content/guides/getting-started/tutorials/with-ionic-vue.mdx
@@ -78,6 +78,8 @@ meta="name=src/views/Account.vue"
 
 With all the components in place, update `App.vue` and the app routes:
 
+<$Partial path="auth_methods.mdx" />
+
 <$CodeSample
 path="/user-management/ionic-vue-user-management/src/router/index.ts"
 lines={[[1, -1]]}
diff --git a/examples/user-management/ionic-vue-user-management/.env.example b/examples/user-management/ionic-vue-user-management/.env.example
new file mode 100644
index 00000000000..c30944bc688
--- /dev/null
+++ b/examples/user-management/ionic-vue-user-management/.env.example
@@ -0,0 +1,2 @@
+VUE_APP_SUPABASE_KEY=YOUR_SUPABASE_KEY
+VUE_APP_SUPABASE_URL=YOUR_SUPABASE_URL
diff --git a/examples/user-management/ionic-vue-user-management/README.md b/examples/user-management/ionic-vue-user-management/README.md
index 1e225eafedf..90601f8439e 100644
--- a/examples/user-management/ionic-vue-user-management/README.md
+++ b/examples/user-management/ionic-vue-user-management/README.md
@@ -25,7 +25,7 @@ This demonstrates how to use:
 
 The Vercel deployment will guide you through creating a Supabase account and project. After installation of the Supabase integration, all relevant environment variables will be set up so that the project is usable immediately after deployment 🚀.
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?project-name=supabase-ionic-vue&repo-name=supabase-ionic-vue&envDescription=Find%20the%20Supabase%20URL%20and%20key%20in%20the%20your%20auto-generated%20docs%20at%20app.supabase.io&repository-url=https%3A%2F%2Fgithub.com%2Fmhartington%2Fsupabase-ionic-vue%2Ftree%2Fmain&env=VUE_APP_SUPABASE_URL%2CVUE_APP_SUPABASE_PUBLISHABLE_KEY)
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?project-name=supabase-ionic-vue&repo-name=supabase-ionic-vue&envDescription=Find%20the%20Supabase%20URL%20and%20key%20in%20the%20your%20auto-generated%20docs%20at%20app.supabase.io&repository-url=https%3A%2F%2Fgithub.com%2Fmhartington%2Fsupabase-ionic-vue%2Ftree%2Fmain&env=VUE_APP_SUPABASE_URL%2CVUE_APP_SUPABASE_KEY)
 
 ## Build from scratch
 
@@ -55,7 +55,7 @@ Update your environment file `environment.ts`
 export const environment = {
   // ...
   supabaseUrl: "YOUR_SUPABASE_URL",
-  supabasePublishableKey: "YOUR_SUPABASE_PUBLISHABLE_KEY"
+  supabaseKey: "YOUR_SUPABASE_KEY"
 };
 ```
 
diff --git a/examples/user-management/ionic-vue-user-management/src/App.vue b/examples/user-management/ionic-vue-user-management/src/App.vue
index aa8db75e481..c691d257025 100644
--- a/examples/user-management/ionic-vue-user-management/src/App.vue
+++ b/examples/user-management/ionic-vue-user-management/src/App.vue
@@ -5,26 +5,27 @@
 </template>
 
 <script setup lang="ts">
-import { IonApp, IonRouterOutlet, useIonRouter } from '@ionic/vue';
+import { IonApp, IonRouterOutlet } from '@ionic/vue';
 import { onUnmounted } from 'vue';
-import { store } from './store';
+import router from './router';
 import { supabase } from './supabase';
 
-const router = useIonRouter();
+async function syncAuthRedirect() {
+  const { data } = await supabase.auth.getClaims();
+  const claims = data?.claims;
+  const path = router.currentRoute.value.path;
 
-supabase.auth.getClaims().then(({ data: { claims } }) => {
-  store.user = claims;
-});
+  if (claims && path === '/') {
+    router.replace('/account');
+  } else if (!claims && path === '/account') {
+    router.replace('/');
+  }
+}
 
 const {
   data: { subscription },
-} = supabase.auth.onAuthStateChange((_event, session) => {
-  store.user = session?.user ?? null;
-  if (session?.user) {
-    router.replace('/account');
-  } else {
-    router.replace('/');
-  }
+} = supabase.auth.onAuthStateChange(() => {
+  syncAuthRedirect();
 });
 
 onUnmounted(() => {
diff --git a/examples/user-management/ionic-vue-user-management/src/router/index.ts b/examples/user-management/ionic-vue-user-management/src/router/index.ts
index bec7f834d67..111fe66589b 100644
--- a/examples/user-management/ionic-vue-user-management/src/router/index.ts
+++ b/examples/user-management/ionic-vue-user-management/src/router/index.ts
@@ -2,6 +2,8 @@ import { createRouter, createWebHistory } from '@ionic/vue-router'
 import { RouteRecordRaw } from 'vue-router'
 import LoginPage from '../views/Login.vue'
 import AccountPage from '../views/Account.vue'
+import { supabase } from '../supabase'
+
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
@@ -20,4 +22,21 @@ const router = createRouter({
   routes,
 })
 
+router.beforeEach(async (to, _from, next) => {
+  const { data } = await supabase.auth.getClaims()
+  const claims = data?.claims
+
+  if (to.path === '/account' && !claims) {
+    next('/')
+    return
+  }
+
+  if (to.path === '/' && claims) {
+    next('/account')
+    return
+  }
+
+  next()
+})
+
 export default router
diff --git a/examples/user-management/ionic-vue-user-management/src/store/index.ts b/examples/user-management/ionic-vue-user-management/src/store/index.ts
deleted file mode 100644
index ebe20f70888..00000000000
--- a/examples/user-management/ionic-vue-user-management/src/store/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import type { Claims } from '@supabase/supabase-js'
-import { reactive } from 'vue'
-
-export const store = reactive<{ user: Claims | null }>({
-  user: null,
-})
diff --git a/examples/user-management/ionic-vue-user-management/src/supabase.ts b/examples/user-management/ionic-vue-user-management/src/supabase.ts
index 4894688f5f8..13459a5434a 100644
--- a/examples/user-management/ionic-vue-user-management/src/supabase.ts
+++ b/examples/user-management/ionic-vue-user-management/src/supabase.ts
@@ -1,7 +1,7 @@
 import { createClient } from '@supabase/supabase-js'
 
 const supabaseUrl = process.env.VUE_APP_SUPABASE_URL
-const supabasePublishableKey = process.env.VUE_APP_SUPABASE_PUBLISHABLE_KEY
+const supabaseKey = process.env.VUE_APP_SUPABASE_KEY
 
 if (!supabaseUrl) {
   throw new Error(
@@ -9,10 +9,10 @@ if (!supabaseUrl) {
   )
 }
 
-if (!supabasePublishableKey) {
+if (!supabaseKey) {
   throw new Error(
-    'Environment variable VUE_APP_SUPABASE_PUBLISHABLE_KEY is not set. Please define it before starting the application.'
+    'Environment variable VUE_APP_SUPABASE_KEY is not set. Please define it before starting the application.'
   )
 }
 
-export const supabase = createClient(supabaseUrl, supabasePublishableKey)
+export const supabase = createClient(supabaseUrl, supabaseKey)
diff --git a/examples/user-management/ionic-vue-user-management/src/views/Account.vue b/examples/user-management/ionic-vue-user-management/src/views/Account.vue
index 823a2a8c3a0..561c9e062a9 100644
--- a/examples/user-management/ionic-vue-user-management/src/views/Account.vue
+++ b/examples/user-management/ionic-vue-user-management/src/views/Account.vue
@@ -12,7 +12,7 @@
         <ion-item>
           <ion-label>
             <p>Email</p>
-            <p>{{ store.user?.email }}</p>
+            <p>{{ email }}</p>
           </ion-label>
         </ion-item>
 
@@ -28,7 +28,7 @@
 
         <ion-item>
           <ion-input
-            type="url"
+            type="text"
             name="website"
             label="Website"
             label-placement="stacked"
@@ -48,7 +48,6 @@
 </template>
 
 <script setup lang="ts">
-import { store } from '@/store';
 import { supabase } from '@/supabase';
 import {
   IonContent,
@@ -62,12 +61,13 @@ import {
   IonItem,
   IonButton,
   IonLabel,
+  useIonRouter,
 } from '@ionic/vue';
 import { onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
 import Avatar from '../components/Avatar.vue';
 
-const router = useRouter();
+const router = useIonRouter();
+const email = ref('');
 
 const profile = ref({
   username: '',
@@ -83,6 +83,8 @@ async function getProfile() {
     const { data: { claims } } = await supabase.auth.getClaims();
     if (!claims) throw new Error('No user logged in');
 
+    email.value = (claims.email as string) ?? '';
+
     const { data, error, status } = await supabase
       .from('profiles')
       .select(`username, website, avatar_url`)
@@ -138,7 +140,7 @@ async function signOut() {
   try {
     const { error } = await supabase.auth.signOut();
     if (error) throw error;
-    await router.push('/');
+    router.push('/', 'forward', 'replace');
   } catch (error: any) {
     toast.message = error.message;
     await toast.present();
diff --git a/examples/user-management/ionic-vue-user-management/src/views/Login.vue b/examples/user-management/ionic-vue-user-management/src/views/Login.vue
index f1a91b0455f..d746b8c6a34 100644
--- a/examples/user-management/ionic-vue-user-management/src/views/Login.vue
+++ b/examples/user-management/ionic-vue-user-management/src/views/Login.vue
@@ -28,7 +28,6 @@
           </div>
         </form>
       </ion-list>
-      <p>{{ email }}</p>
     </ion-content>
   </ion-page>
 </template>