docs(playground): 📝 Added playground examples for custom redirect uri

itpropro · Jan 2, 2025 · 405c668 · 405c668
1 parent 9f720c5
commit 405c668
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 11 deletions.
diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -32,6 +32,9 @@ export default defineNuxtConfig({
         additionalLogoutParameters: {
           logoutHint: '',
         },
+        allowedCallbackRedirectUrls: [
+          'http://localhost:4000/auth/entra/callback',
+        ],
         allowedClientAuthParameters: [
           'test',
         ],

diff --git a/playground/pages/auth/login.vue b/playground/pages/auth/login.vue
@@ -8,16 +8,30 @@ const { providers } = useProviders(currentProvider.value as string)
 </script>
 
 <template>
-  <div class="flex flex-col items-center gap-4">
-    <button
-      v-for="(provider, index) in providers"
-      :key="index"
-      class="btn-base btn-login"
-      :disabled="provider.disabled"
-      @click="login(provider.name as any)"
-    >
-      <span :class="provider.icon" />
-      <span class="pl-2">{{ provider.label }}</span>
-    </button>
+  <div class="flex gap-2 justify-center">
+    <div class="flex flex-col items-center gap-4">
+      <button
+        v-for="(provider, index) in providers"
+        :key="index"
+        class="btn-base btn-login"
+        :disabled="provider.disabled"
+        @click="login(provider.name as any)"
+      >
+        <span :class="provider.icon" />
+        <span class="pl-2">{{ provider.label }}</span>
+      </button>
+    </div>
+    <div class="flex flex-col items-center gap-4">
+      <button
+        v-for="(provider, index) in providers"
+        :key="index"
+        class="btn-base btn-login"
+        :disabled="provider.disabled"
+        @click="login(provider.name as any, { redirectUri: `http://localhost:4000/auth/${provider.name}/callback` })"
+      >
+        <span :class="provider.icon" />
+        <span class="pl-2">{{ provider.label }} redirect</span>
+      </button>
+    </div>
   </div>
 </template>