|
1 | 1 | # Example: `otp-auth` |
2 | 2 |
|
3 | | -This example shows a complete OTP auth flow. It contains a NextJS app with: |
| 3 | +This example shows how to implement [email OTP authentication](https://docs.turnkey.com/authentication/email) with Turnkey using the [@turnkey/react-wallet-kit](https://docs.turnkey.com/sdks/react). |
4 | 4 |
|
5 | | -- a frontend application |
6 | | -- a backend application |
| 5 | +It contains two separate implementations: |
7 | 6 |
|
8 | | -This example contains an example auth page as well as a stub API endpoint for "your business" (where the contact is resolved into an organization ID). It relies on the `indexedDbClient` to stamp the requests. For more information on OTP auth, [check out our documentation](https://docs.turnkey.com/features/otp-auth). |
| 7 | +- **without-backend** - Uses Turnkey’s managed [Auth Proxy](https://docs.turnkey.com/reference/auth-proxy) to securely handle sign-up and login flows with origin enforcement and centralized configuration — no backend required. Your frontend interacts directly with Turnkey. |
| 8 | +- **with-backend** - Demonstrates how to run the same authentication flow through **your own backend**. |
9 | 9 |
|
10 | | -## Getting started |
| 10 | +**Auth Proxy Highlights** |
11 | 11 |
|
12 | | -### 1/ Cloning the example |
| 12 | +- No need to host or maintain your own authentication backend. The Auth Proxy is a managed, multi-tenant service that handles signing and forwarding authentication requests. |
| 13 | +- Proxy keys are HPKE-encrypted inside Turnkey’s enclave and decrypted only in memory per request. Includes strict origin validation and CORS enforcement. |
| 14 | +- Manage allowed origins, session lifetimes, email/SMS templates, and OAuth settings directly from the Turnkey Dashboard. |
| 15 | +- The frontend calls Auth Proxy endpoints directly — no backend endpoints needed for OTP, OAuth, or signup flows. |
13 | 16 |
|
14 | | -Make sure you have `node` installed locally; we recommend using Node v18+. |
| 17 | +**Custom Backend Highlights** |
15 | 18 |
|
16 | | -```bash |
17 | | -$ git clone https://github.com/tkhq/sdk |
18 | | -$ cd sdk/ |
19 | | -$ corepack enable # Install `pnpm` |
20 | | -$ pnpm install -r # Install dependencies |
21 | | -$ pnpm run build-all # Compile source code |
22 | | -$ cd examples/otp-auth/ |
23 | | -``` |
| 19 | +You could: |
24 | 20 |
|
25 | | -### 2/ Setting up Turnkey |
26 | | - |
27 | | -The first step is to set up your Turnkey organization and account. By following the [Quickstart](https://docs.turnkey.com/getting-started/quickstart) guide, you should have: |
28 | | - |
29 | | -- A public/private API key pair for Turnkey |
30 | | -- An organization ID |
31 | | -- A user with an email and permissions to create a wallet (your root user will have full permissions by default) |
32 | | - |
33 | | -Once you've gathered these values, add them to a new `.env.local` file. Notice that your API private key should be securely managed and **_never_** be committed to git. |
34 | | - |
35 | | -```bash |
36 | | -$ cp .env.local.example .env.local |
37 | | -``` |
38 | | - |
39 | | -Now open `.env.local` and add the missing environment variables: |
40 | | - |
41 | | -- `API_PUBLIC_KEY` |
42 | | -- `API_PRIVATE_KEY` |
43 | | -- `NEXT_PUBLIC_ORGANIZATION_ID` |
44 | | -- `NEXT_PUBLIC_BASE_URL` (the `NEXT_PUBLIC` prefix makes the env variable accessible to the frontend app) |
45 | | - |
46 | | -### 3/ Running the app |
47 | | - |
48 | | -```bash |
49 | | -$ pnpm run dev |
50 | | -``` |
51 | | - |
52 | | -This command will run a NextJS app on port 3000. If you navigate to http://localhost:3000 in your browser, you can follow the prompts to start an OTP auth. |
| 21 | +- Store and retrieve user data associated with Turnkey sub-organizations. |
| 22 | +- Add custom validations, rate limiting, and logging. |
| 23 | +- Enable 2/2 signing patterns where your application is a co-signer. |
0 commit comments