make corbado session management ready

.env.example

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_PROJECT_ID=
+API_SECRET=

.eslintrc.json

@@ -1,6 +1,3 @@
 {
-  "extends": "next/core-web-vitals",
-//  "rules": {
-//    "react/jsx-no-undef": [2, { "allowGlobals": true }]
-//  }
+  "extends": "next/core-web-vitals"
 }

README.md

@@ -1,34 +1,43 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Complete passkeys integration example Next.js with Corbado
 
-## Getting Started
+This is a sample implementation of the Corbado webcomponent being integrated into a web application built with Next.js.
 
-First, run the development server:
+## File structure
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-```
+- `src/app` contains `page.tsx`, the file where the web component is embedded
+- `delcaration.d.ts` contains some type declarations
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Setup
 
-You can start editing the page by modifying `app/profile.tsx`. The page auto-updates as you edit the file.
+### Prerequisites
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+Please follow the steps in [Getting started](https://docs.corbado.com/overview/getting-started) to create and configure
+a project in the [Corbado developer panel](https://app.corbado.com).
 
-## Learn More
+You need to have [Node](https://nodejs.org/en/download) and `npm` installed to run it.
 
-To learn more about Next.js, take a look at the following resources:
+### Configure environment variables
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+Use the values you obtained in [Prerequisites](#prerequisites) to configure the following variables inside an `.env`
+file you create in the root folder of this project:
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+```sh
+NEXT_PUBLIC_PROJECT_ID=<YOUR PROJECT ID>
+API_SECRET=<YOUR API SECRET>
+```
 
-## Deploy on Vercel
+## Usage
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+Run
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+```bash
+npm i
+```
+
+to install all dependencies.
+
+Finally, you can run the project locally with
+
+```bash
+npm run dev
+```

delcarations.d.ts

@@ -1,4 +1,3 @@
-/*
 declare namespace JSX {
     interface IntrinsicElements {
         'corbado-auth': any;
@@ -8,4 +7,3 @@ declare namespace JSX {
 }
 
 declare module '@corbado/webcomponent';
-*/

src/app/page.tsx

@@ -1,18 +1,64 @@
 'use client';
 
 import '@corbado/webcomponent/pkg/auth_cui.css'
-// @ts-ignore
-import {useEffect} from "react";
-import Head from 'next/head';
+import {useEffect, useState} from "react";
 
+const projectID = process.env.NEXT_PUBLIC_PROJECT_ID;
 
+interface User {
+    userID: any;
+    email: any;
+    ID: string;
+    created: string;
+    emails: Email[];
+    fullName: string;
+    name: string;
+    phoneNumbers: PhoneNumber[];
+    status: string;
+    updated: string;
+}
+
+interface Email {
+    ID: string;
+    created: string;
+    email: string;
+    status: string;
+    updated: string;
+}
+
+interface PhoneNumber {
+    ID: string;
+    phoneNumber: string;
+    status: string;
+}
 
 export default function Home() {
+    const [user, setUser] = useState<User | null>(null);
+    const [session, setSession] = useState(null);
 
     useEffect(() => {
-        import('@corbado/webcomponent');
+        // This will run only on client-side
+        import('@corbado/webcomponent')
+            .then(module => {
+                const Corbado = module.default || module;
+                setSession(new Corbado.Session(projectID));
+            })
+            .catch(err => {
+                console.log(err);
+            });
     }, []);
 
+    useEffect(() => {
+        // Refresh the session whenever it changes
+        if (session) {
+            // @ts-ignore
+            session.refresh((user: any) => {
+                console.log(user)
+                setUser(user);
+            });
+        }
+    }, [session]);
+
     return (
         <div>
             <corbado-auth-provider project-id={process.env.NEXT_PUBLIC_PROJECT_ID}>
@@ -25,9 +71,19 @@ export default function Home() {
                 </div>
 
                 <div slot="authed">
-                    You're logged in.
+                    <h1>Profile Page</h1>
+                    {user &&
+                        <div>
+                            <p>
+                                User-ID: {user.userID}
+                                <br/>
+                                Email: {user.email}
+                            </p>
+
+                        </div>
+                    }
                     <corbado-logout-handler project-id={process.env.NEXT_PUBLIC_PROJECT_ID}
-                                            redirect-url="http://localhost:3000">
+                                            redirect-url="/">
                         <button>Logout</button>
                     </corbado-logout-handler>
                 </div>