{"id":25201442,"url":"https://github.com/johnforfar/login-with-codewallet-nextjs-demo","last_synced_at":"2025-04-04T20:37:21.112Z","repository":{"id":276645409,"uuid":"929848978","full_name":"johnforfar/login-with-codewallet-nextjs-demo","owner":"johnforfar","description":"A Next.js demo showcasing Code Wallet login integration","archived":false,"fork":false,"pushed_at":"2025-02-09T15:23:59.000Z","size":21,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-09T16:29:58.489Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://login-with-codewallet-nextjs-demo.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johnforfar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-09T14:54:09.000Z","updated_at":"2025-02-09T15:24:02.000Z","dependencies_parsed_at":"2025-02-09T16:30:45.207Z","dependency_job_id":null,"html_url":"https://github.com/johnforfar/login-with-codewallet-nextjs-demo","commit_stats":null,"previous_names":["johnforfar/login-with-codewallet-nextjs-demo"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnforfar%2Flogin-with-codewallet-nextjs-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnforfar%2Flogin-with-codewallet-nextjs-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnforfar%2Flogin-with-codewallet-nextjs-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnforfar%2Flogin-with-codewallet-nextjs-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johnforfar","download_url":"https://codeload.github.com/johnforfar/login-with-codewallet-nextjs-demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247249357,"owners_count":20908208,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-10T05:16:29.313Z","updated_at":"2025-04-04T20:37:21.086Z","avatar_url":"https://github.com/johnforfar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Login with CodeWallet Next.js Demo\n\nThis project demonstrates how to integrate Code Wallet login into a Next.js application. It uses the following three packages:\n- **@code-wallet/client** – for interacting with Code Wallet functionality (login intents, getting status, etc.)\n- **@code-wallet/elements** – for adding built-in UI elements (login button, etc.)\n- **@code-wallet/keys** – for generating and managing keypairs\n\nThe demo provides a complete flow from rendering a login button, creating a login intent on the server side, to handling the successful login callback and retrieving the logged-in user’s public key. The project is split into API endpoints (using Next.js API routes) and a client-side login page.\n\n## Table of Contents\n\n- [Features](#features)\n- [File Structure](#file-structure)\n- [Installation and Setup](#installation-and-setup)\n- [Environment Variables](#environment-variables)\n- [API Endpoints](#api-endpoints)\n- [How It Works](#how-it-works)\n- [License](#license)\n\n## Features\n\n- **Login Flow:** Renders a login button using Code Wallet’s UI elements.\n- **Login Intent Creation:** On button invoke, calls an API endpoint to create a login intent.\n- **Success Handling:** A success API route validates the login, retrieves the intent status, and returns the logged-in user’s public key.\n- **Key Management:** Uses a fixed key (in test mode) or generates a keypair using the environment variable configuration.\n- **Next.js Implementation:** Implements the UI and API endpoints as Next.js pages and API routes.\n\n## File Structure\n\nBelow is an example file structure for the Next.js project:\n\n```\nlogin-with-codewallet-nextjs-demo/\n├── node_modules/\n├── pages/\n│ ├── api/\n│ │ ├── code-payments.ts // Returns public keys for Code Wallet payments (rewritten from /.well-known/code-payments.json)\n│ │ └── login/\n│ │ ├── index.ts // GET: returns the login domain and verifier public key\n│ │ ├── create-intent.ts // GET: creates a login intent via Code Wallet's API\n│ │ └── success/\n│ │ └── [id].ts // GET: handles the success callback and returns intent status and user public key as JSON\n│ ├── index.tsx // Redirects to /login\n│ └── login.tsx // Renders the login page with the Code Wallet login button\n├── public/\n│ └── hex-icon.svg // Logo image used on the login page\n├── next.config.js // Next.js configuration with rewrites for /.well-known/code-payments.json\n├── package.json // Dependencies and scripts\n├── tsconfig.json // TypeScript configuration\n├── next-env.d.ts // Next.js TypeScript declaration file\n├── LICENSE // MIT License file\n└── README.md // This file\n```\n\n## Installation and Setup\n\n1. **Clone the Repository**\n\n   ```bash\n   git clone https://github.com/your-username/login-with-codewallet-nextjs-demo.git\n   cd login-with-codewallet-nextjs-demo\n   ```\n\n2. **Install Dependencies**\n\n   Use npm or yarn:\n\n   ```bash\n   npm install\n   # or\n   yarn install\n   ```\n\n3. **Setup Environment Variables**\n\n   Create a `.env.local` file in the root of your project with the following variables:\n\n   ```env\n   # Set to \"true\" for test mode. When false, production settings apply.\n   TEST_MODE=true\n\n   # (Optional) In production, provide a Base58-encoded secret key for your verifier.\n   STORE_VERIFIER_SECRET=your_base58_encoded_secret_key\n\n   # The domain used for login intents (used when not in TEST_MODE). Example: \"kin.games\"\n   NEXT_PUBLIC_STORE_HOSTNAME=your_domain_here\n   ```\n\n   \u003e For test mode, the project uses a fixed secret key (hardcoded in the API files). In production, if `STORE_VERIFIER_SECRET` is not provided, a new keypair is generated automatically.\n\n4. **Run the Development Server**\n\n   Start the Next.js development server:\n\n   ```bash\n   npm run dev\n   # or\n   yarn dev\n   ```\n\n   Open [http://localhost:3002](http://localhost:3002) in your browser (or the port specified by your environment) and you will be redirected to `/login`.\n\n## Environment Variables\n\n- **TEST_MODE**:  \n  - Set to `\"true\"` when testing to use a fixed secret key.  \n  - Set to `\"false\"` in production.  \n- **STORE_VERIFIER_SECRET**:  \n  - (Optional) Provide a Base58-encoded secret key.  \n  - If not set in production, a new keypair is generated.  \n- **NEXT_PUBLIC_STORE_HOSTNAME**:  \n  - The domain string used during login intent creation.  \n  - Defaults to `\"kin.games\"` if unspecified and not in test mode.\n\n## API Endpoints\n\n### GET `/api/login`\n- **Purpose:** Returns the login domain and the verifier public key.  \n- **Response Example:**\n\n  ```json\n  {\n    \"domain\": \"example-getcode.com\",\n    \"verifier\": \"5TSdPcPLe9CovF5ZK8gfv1kmSpHc9GuWkaDUK2sqC33X\"\n  }\n  ```\n\n### GET `/api/login/create-intent`\n- **Purpose:** Creates a login intent using Code Wallet’s SDK.  \n- **How it Works:**  \n  - The endpoint builds a login intent with parameters such as mode (\"login\"), domain, verifier public key, and uses the generated clientSecret.  \n- **Response Example:**\n\n  ```json\n  {\n    \"clientSecret\": \"client_secret_value_here\",\n    \"id\": \"codeHy87wGD5oMRLG75qKqsSi1vWE3oxNyYmXo5F9YR\"\n  }\n  ```\n\n### GET `/api/login/success/[id]`\n- **Purpose:** Handles the successful login callback and returns the intent status and the logged-in user's public key.  \n- **How it Works:**  \n  - Uses Code Wallet’s `getStatus` and `getUserId` functions with the verifier key to verify the login and retrieve the user’s public key.\n- **Response Example:**\n\n  ```json\n  {\n    \"intent\": \"codeHy87wGD5oMRLG75qKqsSi1vWE3oxNyYmXo5F9YR\",\n    \"status\": {\n      \"status\": \"confirmed\",\n      \"exists\": true,\n      \"codeScanned\": true,\n      \"intentSubmitted\": true\n    },\n    \"user\": {\n      \"userId\": \"8k3pM9w7aJ2VzT6Hr4bNfZxL5yGdCuS1mQeJtB7vRaxP\"\n    }\n  }\n  ```\n\n### Additional Endpoints\n\n- **GET `/api/code-payments` (via Rewrite)**\n  - Returns public keys for Code Wallet payments.  \n  - Exposed under the path `/.well-known/code-payments.json` thanks to Next.js rewrites in `next.config.js`.\n\n- **POST `/api/create-intent`**\n  - (Separate payment intent endpoint) Demonstrates how to create payment intents.\n  - Consult the code comments for details on payload and webhook registration.\n\n## How It Works\n\n1. **Login Page (`/login`):**\n\n   - The `/login` page (pages/login.tsx) uses the Code Wallet Elements SDK to create and mount a login button.\n   - When the component mounts, it fetches login parameters from `/api/login`.\n   - On button \"invoke\", it calls the `/api/login/create-intent` endpoint to generate a new login intent, receives a clientSecret, and updates the button so that the Code Wallet login process can proceed.\n   - The confirm parameters specify a URL pattern (`/api/login/success/{{INTENT_ID}}`) where Code Wallet will redirect after a successful login.\n\n2. **Intent Success Endpoint:**\n\n   - After login, Code Wallet redirects to `/api/login/success/[id]` where `[id]` is the intent id.\n   - This endpoint uses the Code Wallet client functions (`getStatus` and `getUserId`) along with the verifier key to verify the login and retrieve the user’s public key.\n   - The JSON output confirms the login intent status and returns the `userId` (which is the user’s public key).\n\n3. **Environment Configuration:**\n\n   - In test mode, a fixed secret key (hardcoded) is used so that outcomes are consistent.\n   - In production, if `STORE_VERIFIER_SECRET` is not provided, a new keypair is generated on the fly.\n\n## Additional Files\n\n- **next.config.js:**  \n  Contains a rewrite rule to expose `/api/code-payments` as `/.well-known/code-payments.json`.\n\n- **pages/index.tsx:**  \n  A simple redirect page that sends users to `/login`.\n\n## License\n\nThis project is licensed under the MIT License. See the [LICENSE](./LICENSE) file for details.\n\n---\n\nHappy coding and thank you for using our CodeWallet Next.js Demo!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnforfar%2Flogin-with-codewallet-nextjs-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohnforfar%2Flogin-with-codewallet-nextjs-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnforfar%2Flogin-with-codewallet-nextjs-demo/lists"}