├── 01-Login
    ├── .eslintrc.json
    ├── .gitignore
    ├── EXAMPLE.env
    ├── README.md
    ├── components
    │   └── banner.js
    ├── next.config.js
    ├── package.json
    ├── pages
    │   ├── _app.js
    │   ├── dashboard.js
    │   └── index.js
    ├── public
    │   ├── favicon.ico
    │   └── passageloginscreen.png
    └── styles
    │   ├── App.module.css
    │   ├── Banner.module.css
    │   └── globals.css
├── 02-Login-With-Profile
    ├── .eslintrc.json
    ├── .gitignore
    ├── EXAMPLE.env
    ├── README.md
    ├── components
    │   └── banner.js
    ├── next.config.js
    ├── package.json
    ├── pages
    │   ├── _app.js
    │   ├── dashboard.js
    │   └── index.js
    ├── public
    │   └── favicon.ico
    └── styles
    │   ├── App.module.css
    │   ├── Banner.module.css
    │   └── globals.css
├── 03-Login-app-directory
    ├── .env.example
    ├── .eslintrc.json
    ├── .gitignore
    ├── README.md
    ├── actions
    │   └── getCurrentUserInfo.ts
    ├── app
    │   ├── about
    │   │   └── page.tsx
    │   ├── blog
    │   │   ├── [slug]
    │   │   │   └── page.tsx
    │   │   └── page.tsx
    │   ├── dashboard
    │   │   └── page.tsx
    │   ├── favicon.ico
    │   ├── globals.css
    │   ├── layout.tsx
    │   └── page.tsx
    ├── components
    │   ├── Auth.tsx
    │   ├── DashboardContent.tsx
    │   ├── LogoutButton.tsx
    │   ├── banner.tsx
    │   └── footer.tsx
    ├── middleware.ts
    ├── next.config.js
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    ├── public
    │   ├── logo.svg
    │   ├── next.svg
    │   └── vercel.svg
    ├── tailwind.config.js
    ├── tsconfig.json
    └── typings.d.ts
└── README.md


/01-Login/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals",
3 |   "rules": {
4 |     "semi": ["warn", "always"],
5 |     "semi-style": ["warn", "last"]
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/01-Login/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # TypeScript v1 declaration files
 45 | typings/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | 
 78 | # Next.js build output
 79 | .next
 80 | 
 81 | # Nuxt.js build / generate output
 82 | .nuxt
 83 | dist
 84 | 
 85 | # Gatsby files
 86 | .cache/
 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 88 | # https://nextjs.org/blog/next-9-1#public-directory-support
 89 | # public
 90 | 
 91 | # vuepress build output
 92 | .vuepress/dist
 93 | 
 94 | # Serverless directories
 95 | .serverless/
 96 | 
 97 | # FuseBox cache
 98 | .fusebox/
 99 | 
100 | # DynamoDB Local files
101 | .dynamodb/
102 | 
103 | # TernJS port file
104 | .tern-port
105 | 
106 | # DS_Store file
107 | .DS_Store
108 | 
109 | # package-lock
110 | package-lock.json


--------------------------------------------------------------------------------
/01-Login/EXAMPLE.env:
--------------------------------------------------------------------------------
1 | PASSAGE_APP_ID=
2 | # Note that because this example uses the passage-node package, an API key is required.
3 | # You can retrieve an API key for your application by going to the Dashboard and selecting Settings, then API Keys.
4 | PASSAGE_API_KEY=


--------------------------------------------------------------------------------
/01-Login/README.md:
--------------------------------------------------------------------------------
 1 | # Passage Next.js Example App
 2 | 
 3 | This example application uses the [Passage Auth Element](https://www.npmjs.com/package/@passageidentity/passage-elements) in a Next.js application to authenticate users using biometrics or magic links.
 4 | 
 5 | [Passage Node.js SDK](https://www.npmjs.com/package/@passageidentity/passage-node) is used to verify users on authenticated endpoints. To run this example application, follow the instructions below.
 6 | 
 7 | ## Configure Your Environment Variables
 8 | 
 9 | 1. Copy the text in the `EXAMPLE.env` file to your own `.env` file.
10 | 2. Replace the example variables with your own Passage App ID and API Key. You can get these from the [Passage Console](https://console.passage.id). You'll have to register and login, and then create a new application.  (Note that you'll use Passage to do so.)
11 | 3. The App ID is found on the main Dashboard page, and the API Key can be created and retrieved from the `Setting/API Keys` page.  **Note that both are required.**
12 | 
13 | 
14 | ## Getting Started
15 | 
16 | First, run the development server:
17 | 
18 | ```bash
19 | npm run dev
20 | # or
21 | yarn dev
22 | ```
23 | 
24 | Then, ensure that all the dependencies are properly installed by running:
25 | 
26 | ```bash
27 | npm install
28 | ```
29 | 
30 | Once that is complete, open a browser and navigate to [http://localhost:3000](http://localhost:3000)  to see the result.
31 | 
32 | ![Passage Login Screen](public/passageloginscreen.png)
33 | 
34 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
35 | 
36 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
37 | 
38 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
39 | 
40 | # Using Passage with Next.js
41 | 
42 | ## Importing and Using the Passage-Auth Custom Element
43 | 
44 | The easiest way to add authentication to a web frontend is with a Passage Auth custom element. First you'll need to install the [passage-elements](https://www.npmjs.com/package/@passageidentity/passage-elements) package from npm:
45 | 
46 | ```bash
47 | npm i --save @passageidentity/passage-elements
48 | ```
49 | Importing `@passageidentity/passage-elements/passage-auth` triggers a side-effect that will register the passage-auth custom element with the client browser for usage. Since Next.js pre-renders pages on the server this presents a common issue with using web components, such as the Passage elements, in pre-rendered pages - when the server side pre-render occurs there is no client window defined to call `window.customElements.define()` on, which results in an error being thrown.
50 | 
51 | The most common solution when using custom elements in pre-rendered applications is to defer the registration of the custom element to a lifecycle hook so that the code is only executed when the client app is executed in browser. This is done in this example in [pages/index.js](https://github.com/passageidentity/example-nextjs/blob/main/pages/index.js):
52 | 
53 | ```javascript
54 | export default function Home() {
55 | 
56 |     useEffect(()=>{
57 |         require('@passageidentity/passage-elements/passage-auth');
58 |     }, []);
59 | 
60 |     return (
61 |         <div>
62 |             ...
63 |         </div>
64 |     )
65 | }
66 | ```
67 | 
68 | ## Getting Authentication Status and User Information with Server-Side Rendering
69 | 
70 | After the user has logged in with Passage, all requests need to be authenticated using the JWT provided by Passage. Use the [Passage Node.js SDK](https://www.npmjs.com/package/@passageidentity/passage-node) to authenticate requests and retrieve user data for your application. 
71 | 
72 | In this example, we handle authentication securely in Next.js's server-side rendering function [`getServerSideProps()`](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering). Per Next.js documention you can import modules in top-level scope for use in `getServerSideProps`. Imports used in `getServerSideProps` will not be bundled for the client-side. This means you can write server-side code directly in `getServerSideProps`.
73 | 
74 | The JWT provided by Passage is stored in both cookies and localstorage. Next.js provides the cookies set for an application to `getServerSideProps` which allows passing the JWT from the client browser to the server to handle authentication.
75 | 
76 | This is done in this example in pages/dashboard.js.
77 | 


--------------------------------------------------------------------------------
/01-Login/components/banner.js:
--------------------------------------------------------------------------------
 1 | import styles from '../styles/Banner.module.css';
 2 | 
 3 | export default function Banner() {
 4 |     return ( 
 5 |         <div className={styles.mainHeader}>
 6 |             <a href="https://passage.id/" ><div className={styles.passageLogo}></div></a>
 7 |             <div className={styles.headerText}>Passage + Next.js Example App</div>
 8 |             <div className={styles.spacer}></div>
 9 |             <a href="https://passage.id/" className={styles.link}>Go to Passage</a>
10 |         </div>
11 |     );
12 | }
13 | 


--------------------------------------------------------------------------------
/01-Login/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   reactStrictMode: true,
3 | }
4 | 


--------------------------------------------------------------------------------
/01-Login/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "passage-next-app",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "dev": "next dev",
 6 |     "build": "next build",
 7 |     "start": "next start",
 8 |     "lint": "next lint"
 9 |   },
10 |   "dependencies": {
11 |     "@passageidentity/passage-elements": "latest",
12 |     "@passageidentity/passage-node": "latest",
13 |     "next": "12.0.10",
14 |     "react": "17.0.2",
15 |     "react-dom": "17.0.2"
16 |   },
17 |   "devDependencies": {
18 |     "eslint": "8.8.0",
19 |     "eslint-config-next": "12.0.10"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/01-Login/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import '../styles/globals.css';
 2 | 
 3 | import Banner from '../components/banner';
 4 | import styles from '../styles/App.module.css';
 5 | 
 6 | function MyApp({ Component, pageProps }) {
 7 |   return (
 8 |     <>
 9 |       <Banner></Banner>
10 |       <div className={styles.mainContainer}>
11 |         <Component {...pageProps} />
12 |       </div>
13 |       <div className={styles.footer}>
14 |         Learn more with our <u><a href="https://docs.passage.id">Documentation</a></u> and <u><a href="https://github.com/passageidentity">Github</a></u>.
15 |       </div>
16 |     </>
17 |   );
18 | }
19 | 
20 | export default MyApp;


--------------------------------------------------------------------------------
/01-Login/pages/dashboard.js:
--------------------------------------------------------------------------------
 1 | // this import is only included in the server build since its only used in getServerSideProps
 2 | import Passage from '@passageidentity/passage-node';
 3 | import styles from '../styles/App.module.css'
 4 | 
 5 | function Dashboard({isAuthorized, username}){
 6 | 
 7 |   const authorizedBody = 
 8 |   <>
 9 |       You successfully signed in with Passage.
10 |       <br/><br/>
11 |       Your username is: <b>{username}</b>
12 |   </>
13 | 
14 |   const unauthorizedBody = 
15 |   <>
16 |       You have not logged in and cannot view the dashboard.
17 |       <br/><br/>
18 |       <a href="/" className={styles.link}>Login to continue.</a>
19 |   </>
20 | 
21 |   return (
22 |       <div className={styles.dashboard}>
23 |           <div className={styles.title}>{isAuthorized ? 'Welcome!' : 'Unauthorized'}</div>
24 |           <div className={styles.message}>
25 |               { isAuthorized ? authorizedBody : unauthorizedBody }
26 |           </div>
27 |       </div>
28 |   );
29 | };
30 | 
31 | export async function getServerSideProps(context) {
32 |   // getServerSideProps runs server-side only and will never execute on the client browser
33 |   // this allows the safe use of a private Passage API Key
34 |   const passage = new Passage({
35 |     appID: process.env.PASSAGE_APP_ID,
36 |     apiKey: process.env.PASSAGE_API_KEY,
37 |     authStrategy: "HEADER",
38 |   });
39 |   try {
40 |     const authToken = context.req.cookies['psg_auth_token'];
41 |     const req = {
42 |       headers: {
43 |         authorization: `Bearer ${authToken}`,
44 |       },
45 |     };
46 |     const userID = await passage.authenticateRequest(req);
47 |     if (userID) {
48 |       // user is authenticated
49 |       const { email, phone } = await passage.user.get(userID);
50 |       const identifier = email ? email : phone; 
51 |       return { props: {isAuthorized: true, username: identifier} };
52 |     }
53 |   } catch (error) {
54 |     // authentication failed
55 |     return { props: {isAuthorized: false, username: ''} };
56 |   }
57 | }
58 | 
59 | export default Dashboard;


--------------------------------------------------------------------------------
/01-Login/pages/index.js:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react';
 2 | 
 3 | export default function Home({appID}) {
 4 |   useEffect(()=>{
 5 |     require('@passageidentity/passage-elements/passage-auth');
 6 |   }, []);
 7 | 
 8 |   return (
 9 |     <>
10 |     <passage-auth app-id={appID}></passage-auth>
11 |     </>
12 |   )
13 | }
14 | 
15 | export async function getStaticProps(){
16 |   return {
17 |     props: {
18 |       appID: process.env.PASSAGE_APP_ID
19 |     }
20 |   };
21 | }
22 | 


--------------------------------------------------------------------------------
/01-Login/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/passageidentity/example-nextjs/722949a74370f5d0842b67b34b21ecfcb0b32fa9/01-Login/public/favicon.ico


--------------------------------------------------------------------------------
/01-Login/public/passageloginscreen.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/passageidentity/example-nextjs/722949a74370f5d0842b67b34b21ecfcb0b32fa9/01-Login/public/passageloginscreen.png


--------------------------------------------------------------------------------
/01-Login/styles/App.module.css:
--------------------------------------------------------------------------------
 1 | 
 2 | .mainContainer {
 3 |     background: white;
 4 |     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 5 |     border-radius: 20px;
 6 |     width: 310px;
 7 |     min-height: 310px;
 8 |     margin: 30px auto;
 9 | }
10 | .footer {
11 |     text-align: center;
12 |     font-size: 18px;
13 | }
14 | 
15 | .dashboard{
16 |     padding: 30px 30px 20px;
17 | }
18 | .title {
19 |     font-size: 24px;
20 |     font-weight: 700;
21 |     margin-bottom: 30px;
22 | }
23 | .message {
24 |     overflow-wrap: anywhere;
25 | }
26 | .link {
27 |     color: black;
28 |     text-decoration-color: black;
29 | }
30 |   


--------------------------------------------------------------------------------
/01-Login/styles/Banner.module.css:
--------------------------------------------------------------------------------
 1 | .mainHeader{
 2 |     padding: 20px 30px;
 3 |     display: flex;
 4 |     align-items: center;
 5 |     background-color: #282727;
 6 |     color: white;
 7 | }
 8 | .headerText {
 9 |     font-size: 24px;
10 |     margin: 0px 10px;
11 | }
12 |     
13 | .passageLogo {
14 |     background-image: url('https://storage.googleapis.com/passage-docs/passage-logo-dark.svg');
15 |     background-repeat: no-repeat;
16 |     width: 60px;
17 |     height: 60px;
18 |     cursor: pointer;
19 | }
20 | .spacer {
21 |     flex-grow: 1;
22 | }
23 |     
24 | .link {
25 |     margin-left: 20px;
26 |     color: white;
27 |     text-decoration: underline;
28 |     text-decoration-color: white;
29 | }


--------------------------------------------------------------------------------
/01-Login/styles/globals.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   padding: 0;
 4 |   margin: 0;
 5 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
 6 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 7 |   background-color: #E5E5E5;
 8 | }
 9 | 
10 | a {
11 |   color: inherit;
12 |   text-decoration: none;
13 | }
14 | 
15 | * {
16 |   box-sizing: border-box;
17 | }
18 | 


--------------------------------------------------------------------------------
/02-Login-With-Profile/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals",
3 |   "rules": {
4 |     "semi": ["warn", "always"],
5 |     "semi-style": ["warn", "last"]
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/02-Login-With-Profile/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # TypeScript v1 declaration files
 45 | typings/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | 
 78 | # Next.js build output
 79 | .next
 80 | 
 81 | # Nuxt.js build / generate output
 82 | .nuxt
 83 | dist
 84 | 
 85 | # Gatsby files
 86 | .cache/
 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 88 | # https://nextjs.org/blog/next-9-1#public-directory-support
 89 | # public
 90 | 
 91 | # vuepress build output
 92 | .vuepress/dist
 93 | 
 94 | # Serverless directories
 95 | .serverless/
 96 | 
 97 | # FuseBox cache
 98 | .fusebox/
 99 | 
100 | # DynamoDB Local files
101 | .dynamodb/
102 | 
103 | # TernJS port file
104 | .tern-port
105 | 
106 | # DS_Store file
107 | .DS_Store
108 | 
109 | # package-lock
110 | package-lock.json


--------------------------------------------------------------------------------
/02-Login-With-Profile/EXAMPLE.env:
--------------------------------------------------------------------------------
1 | PASSAGE_APP_ID=
2 | # Note that because this example uses the passage-node package, an API key is required.
3 | # You can retrieve an API key for your application by going to the Dashboard and selecting Settings, then API Keys.
4 | PASSAGE_API_KEY=


--------------------------------------------------------------------------------
/02-Login-With-Profile/README.md:
--------------------------------------------------------------------------------
 1 | # Passage Next.js Example App
 2 | 
 3 | This example application uses the [Passage Auth Element](https://www.npmjs.com/package/@passageidentity/passage-elements) in a Next.js application to authenticate users using biometrics or magic links.
 4 | 
 5 | [Passage Node.js SDK](https://www.npmjs.com/package/@passageidentity/passage-node) is used to verify users on authenticated endpoints. To run this example application, follow the instructions below.
 6 | 
 7 | ## Configure Your Environment Variables
 8 | 
 9 | 1. Copy the text in the `EXAMPLE.env` file to your own `.env` file.
10 | 2. Replace the example variables with your own Passage App ID and API Key. You can get these from the [Passage Console](https://console.passage.id). You'll have to register and login, and then create a new application.  (Note that you'll use Passage to do so.)
11 | 3. The App ID is found on the main Dashboard page, and the API Key can be created and retrieved from the `Setting/API Keys` page.  **Note that both are required.**
12 | 
13 | 
14 | ## Getting Started
15 | 
16 | First, run the development server:
17 | 
18 | ```bash
19 | npm run dev
20 | # or
21 | yarn dev
22 | ```
23 | 
24 | Then, ensure that all the dependencies are properly installed by running:
25 | 
26 | ```bash
27 | npm install
28 | ```
29 | 
30 | Once that is complete, open a browser and navigate to [http://localhost:3000](http://localhost:3000)  to see the result.
31 | 
32 | ![Passage Login Screen](public/passageloginscreen.png)
33 | 
34 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
35 | 
36 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
37 | 
38 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
39 | 
40 | # Using Passage with Next.js
41 | 
42 | ## Importing and Using the Passage-Auth Custom Element
43 | 
44 | The easiest way to add authentication to a web frontend is with a Passage Auth custom element. First you'll need to install the [passage-elements](https://www.npmjs.com/package/@passageidentity/passage-elements) package from npm:
45 | 
46 | ```bash
47 | npm i --save @passageidentity/passage-elements
48 | ```
49 | Importing `@passageidentity/passage-elements/passage-auth` triggers a side-effect that will register the passage-auth custom element with the client browser for usage. Since Next.js pre-renders pages on the server this presents a common issue with using web components, such as the Passage elements, in pre-rendered pages - when the server side pre-render occurs there is no client window defined to call `window.customElements.define()` on, which results in an error being thrown.
50 | 
51 | The most common solution when using custom elements in pre-rendered applications is to defer the registration of the custom element to a lifecycle hook so that the code is only executed when the client app is executed in browser. This is done in this example in [pages/index.js](https://github.com/passageidentity/example-nextjs/blob/main/pages/index.js):
52 | 
53 | ```javascript
54 | export default function Home() {
55 | 
56 |     useEffect(()=>{
57 |         require('@passageidentity/passage-elements/passage-auth');
58 |     }, []);
59 | 
60 |     return (
61 |         <div>
62 |             ...
63 |         </div>
64 |     )
65 | }
66 | ```
67 | 
68 | Similarly for the dashboard in this example we use the passage-profile element to display user information. The profile element is imported in the same way the auth element is imported:
69 | 
70 | ```javascript
71 | function Dashboard({isAuthorized, appID}){
72 | 
73 |   useEffect(()=>{
74 |     require('@passageidentity/passage-elements/passage-profile');
75 |   }, []);
76 |   
77 | }
78 | ```
79 | 
80 | ## Getting Authentication Status and User Information with Server-Side Rendering
81 | After the user has logged in with Passage, all requests need to be authenticated using the JWT provided by Passage. The [Passage Node.js SDK](https://www.npmjs.com/package/@passageidentity/passage-node) to authenticate requests and retrieve user data for your application. 
82 | 
83 | In this example, we handle authentication securely in Next.js's server-side rendering function [`getServerSideProps()`](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering). Per Next.js documention you can import modules in top-level scope for use in `getServerSideProps`. Imports used in `getServerSideProps` will not be bundled for the client-side. This means you can write server-side code directly in `getServerSideProps`.
84 | 
85 | The JWT provided by Passage is stored in both cookies and localstorage. Next.js provides the cookies set for an application to `getServerSideProps` which allows passing the JWT from the client browser to the server to handle authentication.
86 | 
87 | This is done in this example in pages/dashboard.js.
88 | 


--------------------------------------------------------------------------------
/02-Login-With-Profile/components/banner.js:
--------------------------------------------------------------------------------
 1 | import styles from '../styles/Banner.module.css';
 2 | 
 3 | export default function Banner() {
 4 |     return ( 
 5 |         <div className={styles.mainHeader}>
 6 |             <a href="https://passage.id/" ><div className={styles.passageLogo}></div></a>
 7 |             <div className={styles.headerText}>Passage + Next.js Example App</div>
 8 |             <div className={styles.spacer}></div>
 9 |             <a href="https://passage.id/" className={styles.link}>Go to Passage</a>
10 |         </div>
11 |     );
12 | }
13 | 


--------------------------------------------------------------------------------
/02-Login-With-Profile/next.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   reactStrictMode: true,
3 | }
4 | 


--------------------------------------------------------------------------------
/02-Login-With-Profile/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "passage-next-app",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "dev": "next dev",
 6 |     "build": "next build",
 7 |     "start": "next start",
 8 |     "lint": "next lint"
 9 |   },
10 |   "dependencies": {
11 |     "@passageidentity/passage-elements": "latest",
12 |     "@passageidentity/passage-node": "latest",
13 |     "next": "12.0.10",
14 |     "react": "17.0.2",
15 |     "react-dom": "17.0.2"
16 |   },
17 |   "devDependencies": {
18 |     "eslint": "8.8.0",
19 |     "eslint-config-next": "12.0.10"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/02-Login-With-Profile/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import '../styles/globals.css';
 2 | 
 3 | import Banner from '../components/banner';
 4 | import styles from '../styles/App.module.css';
 5 | 
 6 | function MyApp({ Component, pageProps }) {
 7 |   return (
 8 |     <>
 9 |       <Banner></Banner>
10 |       <div className={styles.mainContainer}>
11 |         <Component {...pageProps} />
12 |       </div>
13 |       <div className={styles.footer}>
14 |         Learn more with our <u><a href="https://docs.passage.id">Documentation</a></u> and <u><a href="https://github.com/passageidentity">Github</a></u>.
15 |       </div>
16 |     </>
17 |   );
18 | }
19 | 
20 | export default MyApp;


--------------------------------------------------------------------------------
/02-Login-With-Profile/pages/dashboard.js:
--------------------------------------------------------------------------------
 1 | // this import is only included in the server build since its only used in getServerSideProps
 2 | import Passage from '@passageidentity/passage-node';
 3 | import styles from '../styles/App.module.css';
 4 | import { useEffect } from 'react';
 5 | 
 6 | function Dashboard({isAuthorized, appID}){
 7 | 
 8 |   useEffect(()=>{
 9 |     require('@passageidentity/passage-elements/passage-profile');
10 |   }, []);
11 | 
12 |   const authorizedBody = 
13 |   <>
14 |       You successfully signed in with Passage.
15 |       <br/><br/>
16 |       <passage-profile app-id={appID}></passage-profile>
17 |   </>
18 | 
19 |   const unauthorizedBody = 
20 |   <>
21 |       You have not logged in and cannot view the dashboard.
22 |       <br/><br/>
23 |       <a href="/" className={styles.link}>Login to continue.</a>
24 |   </>
25 | 
26 |   return (
27 |       <div className={styles.dashboard}>
28 |           <div className={styles.title}>{isAuthorized ? 'Welcome!' : 'Unauthorized'}</div>
29 |           <div className={styles.message}>
30 |               { isAuthorized ? authorizedBody : unauthorizedBody }
31 |           </div>
32 |       </div>
33 |   );
34 | };
35 | 
36 | export async function getServerSideProps(context) {
37 |   // getServerSideProps runs server-side only and will never execute on the client browser
38 |   // this allows the safe use of a private Passage API Key
39 |   const appID = process.env.PASSAGE_APP_ID;
40 |   const passage = new Passage({
41 |     appID,
42 |     apiKey: process.env.PASSAGE_API_KEY,
43 |     authStrategy: "HEADER",
44 |   });
45 |   try {
46 |     const authToken = context.req.cookies['psg_auth_token'];
47 |     const req = {
48 |       headers: {
49 |         authorization: `Bearer ${authToken}`,
50 |       },
51 |     };
52 |     const userID = await passage.authenticateRequest(req);
53 |     if (userID) {
54 |       return { props: {isAuthorized: true, appID: appID} };
55 |     }
56 |   } catch (error) {
57 |     // authentication failed
58 |     return { props: {isAuthorized: false, appID: appID} };
59 |   }
60 | }
61 | 
62 | export default Dashboard;


--------------------------------------------------------------------------------
/02-Login-With-Profile/pages/index.js:
--------------------------------------------------------------------------------
 1 | import { useEffect } from 'react';
 2 | 
 3 | export default function Home({appID}) {
 4 |   useEffect(()=>{
 5 |     require('@passageidentity/passage-elements/passage-auth');
 6 |   }, []);
 7 | 
 8 |   return (
 9 |     <>
10 |     <passage-auth app-id={appID}></passage-auth>
11 |     </>
12 |   )
13 | }
14 | 
15 | export async function getStaticProps(){
16 |   return {
17 |     props: {
18 |       appID: process.env.PASSAGE_APP_ID
19 |     }
20 |   };
21 | }
22 | 


--------------------------------------------------------------------------------
/02-Login-With-Profile/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/passageidentity/example-nextjs/722949a74370f5d0842b67b34b21ecfcb0b32fa9/02-Login-With-Profile/public/favicon.ico


--------------------------------------------------------------------------------
/02-Login-With-Profile/styles/App.module.css:
--------------------------------------------------------------------------------
 1 | 
 2 | .mainContainer {
 3 |     background: white;
 4 |     box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
 5 |     border-radius: 20px;
 6 |     width: 600px;
 7 |     min-height: 310px;
 8 |     margin: 30px auto;
 9 | }
10 | .footer {
11 |     text-align: center;
12 |     font-size: 18px;
13 | }
14 | 
15 | .dashboard{
16 |     padding: 30px 30px 20px;
17 | }
18 | .title {
19 |     font-size: 24px;
20 |     font-weight: 700;
21 |     margin-bottom: 30px;
22 | }
23 | .message {
24 |     overflow-wrap: anywhere;
25 | }
26 | .link {
27 |     color: black;
28 |     text-decoration-color: black;
29 | }
30 |   


--------------------------------------------------------------------------------
/02-Login-With-Profile/styles/Banner.module.css:
--------------------------------------------------------------------------------
 1 | .mainHeader{
 2 |     padding: 20px 30px;
 3 |     display: flex;
 4 |     align-items: center;
 5 |     background-color: #282727;
 6 |     color: white;
 7 | }
 8 | .headerText {
 9 |     font-size: 24px;
10 |     margin: 0px 10px;
11 | }
12 |     
13 | .passageLogo {
14 |     background-image: url('https://storage.googleapis.com/passage-docs/passage-logo-dark.svg');
15 |     background-repeat: no-repeat;
16 |     width: 60px;
17 |     height: 60px;
18 |     cursor: pointer;
19 | }
20 | .spacer {
21 |     flex-grow: 1;
22 | }
23 |     
24 | .link {
25 |     margin-left: 20px;
26 |     color: white;
27 |     text-decoration: underline;
28 |     text-decoration-color: white;
29 | }


--------------------------------------------------------------------------------
/02-Login-With-Profile/styles/globals.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   padding: 0;
 4 |   margin: 0;
 5 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
 6 |     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
 7 |   background-color: #E5E5E5;
 8 | }
 9 | 
10 | a {
11 |   color: inherit;
12 |   text-decoration: none;
13 | }
14 | 
15 | * {
16 |   box-sizing: border-box;
17 | }
18 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/.env.example:
--------------------------------------------------------------------------------
1 | NEXT_PUBLIC_PASSAGE_APP_ID=
2 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/README.md:
--------------------------------------------------------------------------------
 1 | # Passage + Next.js 13.4 App Router Example
 2 | 
 3 | 
 4 | ## Getting Started
 5 | 
 6 | ### Either fork the repo or directly clone it
 7 | 
 8 | ### To directly clone the repo
 9 | 
10 | ```shell
11 | git clone https://github.com/passageidentity/example-nextjs.git
12 | ```
13 | Then
14 | 
15 | ```shell
16 | cd 03-Login-app-directory
17 | ```
18 | 
19 | ### Install packages
20 | 
21 | ```shell
22 | npm i
23 | ```
24 | 
25 | ### Setup .env file
26 | 
27 | ```js
28 | NEXT_PUBLIC_PASSAGE_APP_ID=
29 | ```
30 | 
31 | ### Start the app
32 | 
33 | ```shell
34 | npm run dev
35 | ```
36 | 
37 | ## Available commands
38 | 
39 | Running commands with npm `npm run [command]`
40 | 
41 | | command         | description                              |
42 | | :-------------- | :--------------------------------------- |
43 | | `dev`           | Starts a development instance of the app |
44 | | `build`         | To build your application                |
45 | | `start`         | Starts a production  instance of the app |
46 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/actions/getCurrentUserInfo.ts:
--------------------------------------------------------------------------------
 1 | import { Passage } from "@passageidentity/passage-js";
 2 | 
 3 | export interface PassageUserInfo {
 4 |   email: string;
 5 |   created_at: string;
 6 | }
 7 | 
 8 | export async function getCurrentUserInfo() {
 9 |   const passage = new Passage(process.env.NEXT_PUBLIC_PASSAGE_APP_ID!);
10 |   try {
11 |     const user = passage.getCurrentUser();
12 |     const userInfo = await user.userInfo();
13 |     return {
14 |       userInfo,
15 |     };
16 |   } catch (error) {
17 |     console.log(error);
18 |   }
19 |   return { userInfo: undefined };
20 | }
21 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/app/about/page.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import { FC } from "react";
 3 | 
 4 | interface pageProps {}
 5 | 
 6 | const page: FC<pageProps> = ({}) => {
 7 |   return (
 8 |     <>
 9 |       <main className="flex flex-col items-center justify-center p-24 ">
10 |         <h1>
11 |           This is a route protected by the middleware. Should not be visible if
12 |           the user is not logged in
13 |         </h1>
14 |         <div className="mt-10 flex flex-col items-center">
15 |           <Link href="/">Back to Home</Link>
16 |           <Link href="/dashboard" className="mt-5">
17 |             Back to Dashboard
18 |           </Link>
19 |           <Link href="/blog" className="mt-5">
20 |             Blog (protected route)
21 |           </Link>
22 |         </div>
23 |       </main>
24 |     </>
25 |   );
26 | };
27 | 
28 | export default page;
29 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/app/blog/[slug]/page.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import { FC } from "react";
 3 | 
 4 | interface pageProps {}
 5 | 
 6 | const page: FC<pageProps> = ({}) => {
 7 |   return (
 8 |     <>
 9 |       <main className="flex flex-col items-center justify-center p-24 ">
10 |         <h1>Blog Slug page</h1>
11 |         <h1>
12 |           This is a route protected by the middleware. Should not be visible if
13 |           the user is not logged in
14 |         </h1>
15 |         <div className="mt-10 flex flex-col items-center">
16 |           <Link href="/">Back to Home</Link>
17 |           <Link href="/dashboard" className="mt-5">
18 |             Back to Dashboard
19 |           </Link>
20 |           <Link href="/blog" className="mt-5">
21 |             Back to Blog Home (protected)
22 |           </Link>
23 |           <Link href="/about" className="mt-5">
24 |             About (protected route)
25 |           </Link>
26 |          
27 |         </div>
28 |       </main>
29 |     </>
30 |   );
31 | };
32 | 
33 | export default page;
34 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/app/blog/page.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import { FC } from "react";
 3 | 
 4 | interface pageProps {}
 5 | 
 6 | const page: FC<pageProps> = ({}) => {
 7 |   return (
 8 |     <>
 9 |       <main className="flex flex-col items-center justify-center p-24 ">
10 |         <h1>
11 |           This is a route protected by the middleware. Should not be visible if
12 |           the user is not logged in
13 |         </h1>
14 |         <div className="mt-10 flex flex-col items-center">
15 |           <Link href="/">Back to Home</Link>
16 |           <Link href="/dashboard" className="mt-5">
17 |             Back to Dashboard
18 |           </Link>
19 |           <Link href="/about" className="mt-5">
20 |             About (protected route)
21 |           </Link>
22 |           <Link href="/blog/3" className="mt-5">
23 |             Blog Slog Page (protected route)
24 |           </Link>
25 |         </div>
26 |       </main>
27 |     </>
28 |   );
29 | };
30 | 
31 | export default page;
32 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/app/dashboard/page.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from "react";
 2 | import DashboardContent from "@/components/DashboardContent";
 3 | import Link from "next/link";
 4 | 
 5 | interface pageProps {}
 6 | 
 7 | const page: FC<pageProps> = ({}) => {
 8 |   return (
 9 |     <>
10 |       <DashboardContent />
11 |       <div className="mt-10 mb-20 flex flex-col items-center">
12 |         <Link href="/">Back to Home</Link>
13 |         <Link href="/blog" className="mt-5">
14 |           Blog(protected route)
15 |         </Link>
16 |       </div>
17 |     </>
18 |   );
19 | };
20 | 
21 | export default page;
22 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/passageidentity/example-nextjs/722949a74370f5d0842b67b34b21ecfcb0b32fa9/03-Login-app-directory/app/favicon.ico


--------------------------------------------------------------------------------
/03-Login-app-directory/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 | 
5 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import Banner from "@/components/banner";
 2 | import "./globals.css";
 3 | import { Inter } from "next/font/google";
 4 | import Footer from "@/components/footer";
 5 | 
 6 | const inter = Inter({ subsets: ["latin"] });
 7 | 
 8 | export const metadata = {
 9 |   title: "Passage + Next.js Example With /app directory",
10 |   description:
11 |     "This is an example of how you can integrate passage with the Next.Js /app directory to Register, Login and also get Authentication Status and User Information.",
12 | };
13 | 
14 | export default function RootLayout({
15 |   children,
16 | }: {
17 |   children: React.ReactNode;
18 | }) {
19 |   return (
20 |     <html lang="en">
21 |       <body className={inter.className}>
22 |         <Banner />
23 |         {children}
24 |         <Footer />
25 |       </body>
26 |     </html>
27 |   );
28 | }
29 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import Auth from "@/components/Auth";
 2 | import Link from "next/link";
 3 | 
 4 | export default function Home() {
 5 |   return (
 6 |     <>
 7 |       <Auth />
 8 |       <main className="flex flex-col items-center justify-center p-24 ">
 9 |         <div>Routes in this application</div>
10 |         <Link href="/">Home</Link>
11 |         <Link href="/dashboard">Dashboard</Link>
12 |         <h1>Middleware Protected routes</h1>
13 |         <Link href="/blog">Blog</Link>
14 |         <Link href="/about">About</Link>
15 |       </main>
16 |     </>
17 |   );
18 | }
19 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/components/Auth.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { FC, useEffect } from "react";
 3 | 
 4 | interface AuthProps {}
 5 | 
 6 | const Auth: FC<AuthProps> = () => {
 7 |   useEffect(() => {
 8 |     require("@passageidentity/passage-elements/passage-auth");
 9 |   }, []);
10 |   return (
11 |     <>
12 |       <passage-auth app-id={process.env.NEXT_PUBLIC_PASSAGE_APP_ID}></passage-auth>
13 |     </>
14 |   );
15 | };
16 | 
17 | export default Auth;
18 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/components/DashboardContent.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { FC, useEffect, useState } from "react";
 3 | import { getCurrentUserInfo, PassageUserInfo } from "@/actions/getCurrentUserInfo";
 4 | import LogoutButton from "./LogoutButton";
 5 | import Link from "next/link";
 6 | import { format } from "date-fns";
 7 | 
 8 | interface DashboardContentProps {}
 9 | 
10 | const DashboardContent: FC<DashboardContentProps> = ({}) => {
11 |   const [userInfo, setUserInfo] = useState<PassageUserInfo | undefined>(
12 |     undefined
13 |   );
14 |   const [isLoading, setIsLoading] = useState(true);
15 | 
16 |   useEffect(() => {
17 |     const fetchSessionInfo = async () => {
18 |       const sessionInfo = await getCurrentUserInfo();
19 |       setUserInfo(sessionInfo.userInfo);
20 |       setIsLoading(false);
21 |     };
22 | 
23 |     fetchSessionInfo();
24 |   }, []);
25 | 
26 |   if (isLoading) {
27 |     // Render loading state if the session information is still being fetched
28 |     return <div>Loading...</div>;
29 |   }
30 | 
31 |   if (!userInfo) {
32 |     // Render the message if the session doesn't exist
33 |     return (
34 |       <main className="flex justify-center p-24 ">
35 |         <div className="border flex justify-center border-black rounded-xl w-96">
36 |           <div className="p-10 pb-5">
37 |             <div className="font-bold text-2xl mb-5">
38 |               <h1>Unauthorized</h1>
39 |             </div>
40 |             <div className="break-normal"></div>
41 |             <p>
42 |               You have not logged in and cannot view the dashboard.
43 |               <br />
44 |               <Link
45 |                 href="/"
46 |                 className="underline font-bold hover:text-blue-600 "
47 |               >
48 |                 Login to continue.
49 |               </Link>
50 |             </p>
51 |           </div>
52 |         </div>
53 |       </main>
54 |     );
55 |   }
56 | 
57 |   const formattedCreatedAt = format(
58 |     new Date(userInfo.created_at),
59 |     "yyyy-MM-dd HH:mm:ss"
60 |   );
61 | 
62 |   return (
63 |     <>
64 |       <main className="flex justify-center p-24 ">
65 |         <div className="border flex justify-center border-black rounded-xl w-96">
66 |           <div className="p-10 pb-5">
67 |             <div className="font-bold text-2xl mb-5">
68 |               <h1>Welcome</h1>
69 |             </div>
70 |             <div className="break-normal"></div>
71 |             <p>
72 |               You successfully signed in with Passage.
73 |               <br />
74 |               Your username is: <b> {userInfo.email}</b>
75 |               <br />
76 |               Account created at:
77 |               <br /> <b> {formattedCreatedAt}</b>
78 |             </p>
79 |             <LogoutButton />
80 |           </div>
81 |         </div>
82 |       </main>
83 |     </>
84 |   );
85 | };
86 | 
87 | export default DashboardContent;
88 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/components/LogoutButton.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { useRouter } from "next/navigation";
 3 | import { FC } from "react";
 4 | import { Passage } from "@passageidentity/passage-js";
 5 | 
 6 | interface LogoutButtonProps {}
 7 | 
 8 | const LogoutButton: FC<LogoutButtonProps> = ({}) => {
 9 |   const router = useRouter();
10 |   const passage = new Passage(process.env.NEXT_PUBLIC_PASSAGE_APP_ID!);
11 |   const session = passage.getCurrentSession();
12 |   const handleLogout = () => {
13 |     session.signOut();
14 |     router.push("/");
15 |   };
16 | 
17 |   return (
18 |     <>
19 |       <div
20 |         onClick={handleLogout}
21 |         className="mt-5 bg-red-800 w-fit px-5 py-3 rounded-xl text-neutral-200 cursor-pointer"
22 |       >
23 |         Logout
24 |       </div>
25 |     </>
26 |   );
27 | };
28 | 
29 | export default LogoutButton;
30 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/components/banner.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | 
 3 | export default function Banner() {
 4 |   return (
 5 |     <>
 6 |       <div className="flex justify-between p-5 items-center bg-slate-700 text-neutral-200">
 7 |         <div className="flex items-center ">
 8 |           <div className="">
 9 |             <a href="https://passage.id/">
10 |               <Image src="/logo.svg" alt="logo" width={60} height={60} />
11 |             </a>
12 |           </div>
13 |           <div className="text-lg lg:text-3xl">
14 |             Passage + Next.js Example With /app directory and tailwindcss
15 |           </div>
16 |         </div>
17 |         <div>
18 |           <a href="https://passage.id/">Go to Passage</a>
19 |         </div>
20 |       </div>
21 |     </>
22 |   );
23 | }
24 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/components/footer.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from "react";
 2 | 
 3 | interface FooterProps {}
 4 | 
 5 | const Footer: FC<FooterProps> = ({}) => {
 6 |   return (
 7 |     <>
 8 |       <div className="flex justify-center">
 9 |         Learn more with our
10 |         <a href="https://docs.passage.id" className="underline hover:text-blue-500">&nbsp;Documentation&nbsp;</a>
11 |         and
12 |         <a href="https://github.com/passageidentity" className="underline hover:text-blue-500">&nbsp;Github</a>.
13 |       </div>
14 |     </>
15 |   );
16 | };
17 | 
18 | export default Footer;
19 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/middleware.ts:
--------------------------------------------------------------------------------
 1 | import { NextResponse } from "next/server";
 2 | import type { NextRequest } from "next/server";
 3 | import Passage from "@passageidentity/passage-node";
 4 | 
 5 | export async function middleware(request: NextRequest) {
 6 |   const authToken = request.cookies.get("psg_auth_token")?.value;
 7 |   if (!authToken) {
 8 |     return NextResponse.redirect(new URL("/", request.url));
 9 |   }
10 | 
11 |   const passage = new Passage({
12 |     appID: process.env.NEXT_PUBLIC_PASSAGE_APP_ID!,
13 |   });
14 | 
15 |   const userID = await passage.validAuthToken(authToken as string);
16 |   if (!userID) {
17 |     return NextResponse.redirect(new URL("/", request.url));
18 |   }
19 | }
20 | 
21 | // See "Matching Paths" below to learn more
22 | export const config = {
23 |   matcher: ["/about/:path*", "/blog/:path*"],
24 | };
25 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {}
3 | 
4 | module.exports = nextConfig
5 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "example-nextjs-appdirectory",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@passageidentity/passage-auth": "^0.1.0-beta.28",
13 |     "@passageidentity/passage-elements": "^1.9.0",
14 |     "@passageidentity/passage-node": "^2.3.2",
15 |     "@types/node": "20.3.0",
16 |     "@types/react": "18.2.11",
17 |     "@types/react-dom": "18.2.4",
18 |     "autoprefixer": "10.4.14",
19 |     "date-fns": "^2.30.0",
20 |     "eslint": "8.42.0",
21 |     "eslint-config-next": "13.4.5",
22 |     "install": "^0.13.0",
23 |     "next": "13.4.5",
24 |     "npm": "^9.7.1",
25 |     "postcss": "8.4.24",
26 |     "react": "18.2.0",
27 |     "react-dom": "18.2.0",
28 |     "tailwindcss": "3.3.2",
29 |     "typescript": "5.1.3"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/public/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900"><defs><style>.cls-1,.cls-2{fill:#5063f6;}.cls-1,.cls-4{opacity:0.8;}.cls-2,.cls-5{opacity:0.5;}.cls-3,.cls-4,.cls-5{fill:#ff2f1d;}</style></defs><path class="cls-1" d="M153.3572,268.17461l92.60186,53.46369a149.76938,149.76938,0,0,1,42.79168,222.29155L67.80006,416.364A85.55715,85.55715,0,1,1,153.3572,268.17461Z"/><path class="cls-2" d="M153.3572,635.72333l92.60186-53.46369a149.76942,149.76942,0,0,0,42.79168-222.29156L67.80006,487.534A85.55715,85.55715,0,1,0,153.3572,635.72333Z"/><path class="cls-2" d="M746.6428,268.17462l-92.60186,53.4637a149.76941,149.76941,0,0,0-42.79168,222.29155L832.19994,416.364A85.55715,85.55715,0,1,0,746.6428,268.17462Z"/><path class="cls-1" d="M746.6428,635.72335l-92.60186-53.4637A149.76941,149.76941,0,0,1,611.24926,359.9681L832.19994,487.534A85.55716,85.55716,0,1,1,746.6428,635.72335Z"/><circle class="cls-3" cx="449.99999" cy="450.01533" r="85.55397"/><path class="cls-4" d="M266.22563,746.6428l53.4637-92.60186a149.76941,149.76941,0,0,1,222.29155-42.79168L414.415,832.19994A85.55715,85.55715,0,1,1,266.22563,746.6428Z"/><path class="cls-5" d="M633.77436,746.6428l-53.4637-92.60186a149.76941,149.76941,0,0,0-222.29155-42.79168L485.585,832.19994A85.55716,85.55716,0,1,0,633.77436,746.6428Z"/><path class="cls-2" d="M266.22564,153.3572l53.4637,92.60186a149.76941,149.76941,0,0,0,222.29155,42.79168L414.415,67.80006A85.55716,85.55716,0,1,0,266.22564,153.3572Z"/><path class="cls-1" d="M633.77437,153.3572l-53.4637,92.60186a149.76941,149.76941,0,0,1-222.29155,42.79168L485.585,67.80006A85.55715,85.55715,0,1,1,633.77437,153.3572Z"/></svg>


--------------------------------------------------------------------------------
/03-Login-app-directory/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/03-Login-app-directory/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/03-Login-app-directory/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     './pages/**/*.{js,ts,jsx,tsx,mdx}',
 5 |     './components/**/*.{js,ts,jsx,tsx,mdx}',
 6 |     './app/**/*.{js,ts,jsx,tsx,mdx}',
 7 |   ],
 8 |   theme: {
 9 |     extend: {
10 |       backgroundImage: {
11 |         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
12 |         'gradient-conic':
13 |           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
14 |       },
15 |     },
16 |   },
17 |   plugins: [],
18 | }
19 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true,
17 |     "plugins": [
18 |       {
19 |         "name": "next"
20 |       }
21 |     ],
22 |     "paths": {
23 |       "@/*": ["./*"]
24 |     }
25 |   },
26 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
27 |   "exclude": ["node_modules"]
28 | }
29 | 


--------------------------------------------------------------------------------
/03-Login-app-directory/typings.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace JSX {
2 |     import { PassageElement, PassageProfileElement } from '@passageidentity/passage-elements'
3 |     interface IntrinsicElements {
4 |         "passage-auth": PassageElement;
5 |         "passage-login": PassageElement;
6 |         "passage-register": PassageElement;
7 |         "passage-profile": PassageProfileElement;
8 |     }
9 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Passage + Next.js Examples
 2 | This repository contains Next.js examples for different use cases with Passage.
 3 | 
 4 | # What is Passage
 5 | Passage is a passwordless authentication system that leverages biometrics (with a fallback of magic links) to authenticate users on your websites or mobile applications.  By leveraging the [WebAuthn protocol](https://webauthn.io/) from the [FIDO Alliance](https://fidoalliance.org/), Passage can increase security and reduce end user friction.   
 6 | 
 7 | Passage provides a full UI/UX login and registration in a web component that can be added to any application, as well as backend libraries in Python, Go, and Node.js to support user verification. To learn more [visit our website](https://passage.id).
 8 | 
 9 | 
10 | # Examples in This Repo
11 | 
12 | This repository contains two examples:
13 | 
14 | * [Authenticating with Passage](./01-Login) -- a simple example implementing passwordless authentication
15 | * [Login with Profile](./02-Login-With-Profile) -- an example using passwordless authentication that displays information about registered devices
16 | 
17 | We have posted a blog entry describing [how these demos can be built from scratch](https://passage.id/post/building-a-next-js-app-with-biometrics).


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