├── .env.example
├── server
    └── tsconfig.json
├── public
    └── favicon.ico
├── tsconfig.json
├── nuxt.config.ts
├── .gitignore
├── package.json
├── pages
    ├── index.vue
    └── profile.vue
├── layouts
    └── default.vue
└── README.md


/.env.example:
--------------------------------------------------------------------------------
1 | VITE_CORBADO_PROJECT_ID=pro-xxx


--------------------------------------------------------------------------------
/server/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "../.nuxt/tsconfig.server.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/corbado/example-passkeys-nuxtjs/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://nuxt.com/docs/guide/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | // https://nuxt.com/docs/api/configuration/nuxt-config
2 | export default defineNuxtConfig({
3 |   devtools: { enabled: true },
4 | })
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Nuxt dev/build outputs
 2 | .output
 3 | .data
 4 | .nuxt
 5 | .nitro
 6 | .cache
 7 | dist
 8 | 
 9 | # Node dependencies
10 | node_modules
11 | 
12 | # Logs
13 | logs
14 | *.log
15 | 
16 | # Misc
17 | .DS_Store
18 | .fleet
19 | .idea
20 | 
21 | # Local env files
22 | .env
23 | .env.*
24 | !.env.example
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-app",
 3 |   "private": true,
 4 |   "type": "module",
 5 |   "scripts": {
 6 |     "build": "nuxt build",
 7 |     "dev": "nuxt dev",
 8 |     "generate": "nuxt generate",
 9 |     "preview": "nuxt preview",
10 |     "postinstall": "nuxt prepare"
11 |   },
12 |   "dependencies": {
13 |     "@corbado/web-js": "^2.6.0",
14 |     "nuxt": "^3.11.2",
15 |     "vue": "^3.4.21",
16 |     "vue-router": "^4.3.0"
17 |   },
18 |   "devDependencies": {
19 |     "@corbado/types": "^2.4.0"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 |   import Corbado from "@corbado/web-js"
 3 |   import {onMounted} from "vue";
 4 | 
 5 |   const authElement = useState<HTMLDivElement | undefined>('authElement', () => undefined)
 6 | 
 7 |   onMounted(() => {
 8 |     if (authElement.value) {
 9 |       Corbado.mountAuthUI(authElement.value, {
10 |         onLoggedIn: () => {
11 |           navigateTo("/profile")
12 |         },
13 |       })
14 |     }
15 |   })
16 | </script>
17 | 
18 | <template>
19 |   <div ref="authElement"></div>
20 | </template>


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 |   import Corbado from "@corbado/web-js"
 3 |   import {onMounted} from "vue";
 4 | 
 5 |   const isInitialized = useState('isInitialized', () => false)
 6 | 
 7 |   const projectId = import.meta.env.VITE_CORBADO_PROJECT_ID
 8 | 
 9 |   onMounted(async () => {
10 |     await Corbado.load({
11 |       projectId: projectId,
12 |       darkMode: "off"
13 |     })
14 |     isInitialized.value = true
15 |   })
16 | 
17 | </script>
18 | 
19 | <template>
20 |   <div v-if="isInitialized">
21 |     <slot/>
22 |   </div>
23 | </template>


--------------------------------------------------------------------------------
/pages/profile.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | import Corbado from "@corbado/web-js"
 3 | 
 4 | const user = Corbado.user
 5 | 
 6 | async function handleLogout() {
 7 |   await Corbado.logout()
 8 |   await navigateTo("/")
 9 | }
10 | </script>
11 | 
12 | <template>
13 |   <div>
14 |     <div v-if="user">
15 |       <h1>Profile Page</h1>
16 |       <p>
17 |         User-ID: {{ user.sub }}
18 |         <br />
19 |         Email: {{ user.email }}
20 |       </p>
21 |       <button @click="handleLogout">Logout</button>
22 |     </div>
23 | 
24 |     <!-- Show the "not logged in" message if the user is not logged in -->
25 |     <div v-else>
26 |       <p>You're not logged in.</p>
27 |       <p>
28 |         Please go back to <NuxtLink href="/">home</NuxtLink> to log in.
29 |       </p>
30 |     </div>
31 |   </div>
32 | </template>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Passkey-First Authentication with Nuxt.js and Corbado
 2 | 
 3 | This is a sample implementation of the Corbado UI component being integrated into a web application built with Nuxt.js.
 4 | 
 5 | Please see the [full blog post](https://www.corbado.com/blog/passkeys-nuxtjs) to understand the detailed steps needed to integrate passkeys into Nuxt.js apps.
 6 | 
 7 | ## File structure
 8 | 
 9 | - `layouts/default.vue`: Encapsulating layout handling Corbado project initialization
10 | - `pages/index.vue`: component for the sign up / login screen
11 | - `pages/profile.vue`: component for the user profile information that is shown after successful authentication
12 | 
13 | ## Setup
14 | 
15 | ### Prerequisites
16 | 
17 | Please follow the steps in [Getting started](https://docs.corbado.com/overview/getting-started) to create and configure
18 | a project in the [Corbado developer panel](https://app.corbado.com/signin#register).
19 | 
20 | You need to have [Node](https://nodejs.org/en/download) and `npm` installed to run it.
21 | 
22 | ## Usage
23 | 
24 | Run
25 | 
26 | ```bash
27 | npm i
28 | ```
29 | 
30 | to install all dependencies.
31 | 
32 | Finally, you can run the project locally with
33 | 
34 | ```bash
35 | npm run dev
36 | ```


--------------------------------------------------------------------------------