chore: redirect in auth

Author: posva

packages/nuxt/playground/pages/authentication.vue

@@ -28,6 +28,21 @@ const auth = useFirebaseAuth()!
 const user = useCurrentUser()
 let credential: AuthCredential | null = null
 
+const route = useRoute()
+const router = useRouter()
+
+// automatically redirect the user if they are logged in but was rejected on the server beacuse of an outdated cookie
+onMounted(async () => {
+  const currentUser = await getCurrentUser()
+  if (
+    currentUser &&
+    route.query.redirect &&
+    typeof route.query.redirect === 'string'
+  ) {
+    router.push(route.query.redirect)
+  }
+})
+
 // new user
 const email = ref('')
 const password = ref('')
@@ -82,30 +97,20 @@ onMounted(() => {
 <template>
   <main>
     <h1>Auth playground</h1>
-    <button @click="signOut(auth)">
-      SignOut
-    </button>
-    <button @click="signInAnonymously(auth)">
-      Anonymous signIn
-    </button>
-    <button @click="signinPopup()">
-      Signin Google (popup)
-    </button>
-    <button @click="signinRedirect()">
-      Signin Google (redirect)
-    </button>
-    <button @click="changeUserImage">
-      Change User picture
-    </button>
+    <button @click="signOut(auth)">SignOut</button>
+    <button @click="signInAnonymously(auth)">Anonymous signIn</button>
+    <button @click="signinPopup()">Signin Google (popup)</button>
+    <button @click="signinRedirect()">Signin Google (redirect)</button>
+    <button @click="changeUserImage">Change User picture</button>
 
     <form @submit.prevent="signUp()">
       <fieldset>
         <legend>New User</legend>
 
-        <label> Email: <input v-model="email" type="email" required> </label>
+        <label> Email: <input v-model="email" type="email" required /> </label>
 
         <label>
-          Password: <input v-model="password" type="password" required>
+          Password: <input v-model="password" type="password" required />
         </label>
 
         <button>Create</button>
@@ -116,26 +121,26 @@ onMounted(() => {
       <fieldset>
         <legend>Sign in</legend>
 
-        <label> Email: <input v-model="email" type="email" required> </label>
+        <label> Email: <input v-model="email" type="email" required /> </label>
 
         <label>
-          Password: <input v-model="password" type="password" required>
+          Password: <input v-model="password" type="password" required />
         </label>
 
         <button>Signin</button>
       </fieldset>
     </form>
 
     <p v-if="user">
-      Name: {{ user.displayName }} <br>
+      Name: {{ user.displayName }} <br />
       <img
         v-if="user.photoURL"
         :src="user.photoURL"
         referrerpolicy="no-referrer"
-      >
+      />
     </p>
 
-    <hr>
+    <hr />
 
     <!-- this is for debug purposes only, displaying it on the server would create a hydration mismatch -->
     <ClientOnly>