corbado · nicolaistein · Oct 4, 2023 · Oct 4, 2023 · Oct 10, 2023 · Oct 10, 2023
diff --git a/.env.local.example b/.env.local.example
@@ -1,6 +1,5 @@
 NEXTAUTH_URL=http://localhost:3000
-NEXTAUTH_SECRET= # Linux: `openssl rand -hex 32` or go to https://generate-secret.now.sh/32
-// verstehe die Zeile hier drüber noch nicht
+NEXTAUTH_SECRET=
 
 AUTH0_ID=
 AUTH0_SECRET=
@@ -21,4 +20,5 @@ GOOGLE_SECRET=
 TWITTER_ID=
 TWITTER_SECRET=
 
-// brauchen wir hier die Platzhalter für Corbado nicht auch noch?
+CORBADO_PROJECT_ID=
+CORBADO_API_SECRET=
diff --git a/components/header.tsx b/components/header.tsx
@@ -69,15 +69,6 @@ export  default function Header() {
           <li className={styles.navItem}>
             <Link href="/">Home</Link>
           </li>
-          <li className={styles.navItem}>
-            <Link href="/protected">Protected</Link>
-          </li>
-          <li className={styles.navItem}>
-            <Link href="/api-example">API</Link>
-          </li>
-          <li className={styles.navItem}>
-            <Link href="/admin">Admin</Link>
-          </li>
           <li className={styles.navItem}>
             <Link href="/me">Me</Link>
           </li>

diff --git a/next.config.js b/next.config.js
@@ -4,6 +4,10 @@ module.exports = (phase, { defaultConfig }) => {
   return {
     ...defaultConfig,
 
+    reactStrictMode: true,
+    env: {
+      CORBADO_PROJECT_ID: process.env.CORBADO_PROJECT_ID,
+    },
     webpack: (config) => {
       config.resolve = {
         ...config.resolve,

diff --git a/pages/_document.js b/pages/_document.js
@@ -0,0 +1,30 @@
+import Document, { Html, Head, Main, NextScript } from "next/document";
+
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head>
+          <title>NextAuth passkey demo</title>
+
+          <link
+            href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+            rel="stylesheet"
+            integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+            crossorigin="anonymous"
+          ></link>
+          <script
+            src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+            crossorigin="anonymous"
+          ></script>
+        </Head>
+
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
diff --git a/pages/api/auth/[...nextauth].ts b/pages/api/auth/[...nextauth].ts
@@ -41,24 +41,29 @@ export const authOptions: NextAuthOptions = {
       async authorize(cred, req) {
         if(cred.provider !== "corbado") return null;
 
-        // das ist aus dem Node.js SDK rauskopiert oder?
-        // weil ggf. kurze Erklärung in den Comments, was hier passiert gut wäre
+        // Get the token from the cookie
         var cbo_short_session = req.headers.cookie.split("; ").find(row => row.startsWith("cbo_short_session"));
         var token = cbo_short_session.split("=")[1];
+
+        // Get the JWKS URL from the project ID
         var issuer = "https://" + projectID + ".frontendapi.corbado.io";
         var jwksUrl = issuer + "/.well-known/jwks"; 
 
+        // Initialize the JWKS client
         const JWKS = jose.createRemoteJWKSet(new URL(jwksUrl), {
           cacheMaxAge: 10 * 60 * 1000
         })
         const options = {
             issuer: issuer,
         }
         try {
+
+        // Verify the token
             const {payload} = await jose.jwtVerify(token, JWKS, options)
             if (payload.iss === issuer) {
-              //Load data from database
-              // Von der User database right?
+
+              //
+              //Next steps: Load data from database here to always have all the data available in the session
               return { email: payload.email, name: payload.name, image: null};
             }else{
               console.log("issuer not valid")

diff --git a/pages/api/auth/associate.ts b/pages/api/auth/associate.ts
@@ -4,7 +4,7 @@ import type { NextApiRequest, NextApiResponse } from "next"
 
 // sind nicht im passenden .env Example
 const projectID = process.env.CORBADO_PROJECT_ID;
-const apiSecret = process.env.API_SECRET;
+const apiSecret = process.env.CORBADO_API_SECRET;
 
 
 export default async function handler(

diff --git a/pages/api/examples/jwt.ts b/pages/api/examples/jwt.ts
diff --git a/pages/api/examples/protected.ts b/pages/api/examples/protected.ts
diff --git a/pages/api/examples/session.ts b/pages/api/examples/session.ts
diff --git a/pages/auth/redirect.tsx b/pages/auth/redirect.tsx
@@ -3,10 +3,6 @@ import { getProviders, signIn } from "next-auth/react"
 import { getServerSession } from "next-auth/next"
 import { authOptions } from "../api/auth/[...nextauth]";
 
-// bitte über zentrale .env File beziehen
-const projectID = "pro-2808756695548043260";
-console.log("Project ID: ", projectID)
-
 
 export default function Redirect( 
    { providers }: InferGetServerSidePropsType<typeof getServerSideProps>,  req: NextApiRequest,

diff --git a/pages/auth/signin.tsx b/pages/auth/signin.tsx
@@ -8,6 +8,8 @@ import { useCallback, useEffect, useState } from "react";
 
 import '@corbado/webcomponent/pkg/auth_cui.css'
 
+const projectID = process.env.CORBADO_PROJECT_ID;
+
 export default function SignIn( 
    { providers }: InferGetServerSidePropsType<typeof getServerSideProps>,  req: NextApiRequest,
    res: NextApiResponse) {
@@ -27,12 +29,10 @@ export default function SignIn(
           .then(module => {
               const Corbado = module.default || module;
 
-              console.log("Initializing Corbado session")
-              // bitte über .env File beziehen
-              setSession(new Corbado.Session("pro-2808756695548043260"));
+              ("Initializing Corbado session")
+              setSession(new Corbado.Session(projectID));
           })
           .catch(err => {
-              console.log(err);
           });
   }, [])
 
@@ -46,9 +46,6 @@ export default function SignIn(
 
   return (
     <>
-        {/*das nicht in einen zentralen Header packen?*/}
-      <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"></link>
-      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
     <div className="parent">
       <div className="buttons">
       {providersNew.map((provider) => (
@@ -59,12 +56,10 @@ export default function SignIn(
         </div>
       ))}
       </div>
-      <div>
-          {/*aus .env File holen*/}
-        <corbado-auth project-id="pro-2808756695548043260" conditional="yes">
-          <input name="username" id="corbado-username"
-          required autoComplete="webauthn"/>
-        </corbado-auth>
+      <div className="associate-container">
+
+      <corbado-passkey-associate-login 
+            project-id={projectID}/>
       </div>
       </div>
       <style jsx>{`
@@ -85,6 +80,13 @@ export default function SignIn(
           border-radius: 30px;
           background-color: #1853FE;
         }
+
+        .associate-container {
+          width: 200px;
+          margin-left: auto;
+          margin-right: auto;
+          align-items: center;
+        }
       `}</style>
     </>
   )