Built in OTP provider

apps/dev/otp-example/.env.example

@@ -0,0 +1,5 @@
+GITHUB_ID=
+GITHUB_SECRET=
+# On UNIX systems you can use `openssl rand -hex 32` or 
+# https://generate-secret.vercel.app/32 to generate a secret.
+AUTH_SECRET=

apps/dev/otp-example/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

apps/dev/otp-example/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

apps/dev/otp-example/.gitignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+.vercel
+.output
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

apps/dev/otp-example/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

apps/dev/otp-example/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "semi": false,
+  "plugins": ["prettier-plugin-svelte"],
+  "pluginSearchDirs": ["."],
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

apps/dev/otp-example/README.md

@@ -0,0 +1,28 @@
+> The example repository is maintained from a [monorepo](https://github.com/nextauthjs/next-auth/tree/main/apps/example-sveltekit). Pull Requests should be opened against [`nextauthjs/next-auth`](https://github.com/nextauthjs/next-auth).
+
+<p align="center">
+   <br/>
+   <a href="https://authjs.dev" target="_blank"><img width="150px" src="https://authjs.dev/img/logo/logo-sm.png" /></a>
+   <h3 align="center">Auth.js Example App with <a href="https://kit.svelte.dev">SvelteKit</a></h3>
+   <p align="center">
+   Open Source. Full Stack. Own Your Data.
+   </p>
+   <p align="center" style="align: center;">
+      <a href="https://npm.im/@auth/sveltekit">
+        <img alt="npm" src="https://img.shields.io/npm/v/@auth/sveltekit?color=green&label=@auth/sveltekit&style=flat-square">
+      </a>
+      <a href="https://bundlephobia.com/result?p=sveltekit-auth-example">
+        <img src="https://img.shields.io/bundlephobia/minzip/@auth/sveltekit?label=size&style=flat-square" alt="Bundle Size"/>
+      </a>
+      <a href="https://www.npmtrends.com/@auth/sveltekit">
+        <img src="https://img.shields.io/npm/dm/@auth/sveltekit?label=%20downloads&style=flat-square" alt="Downloads" />
+      </a>
+      <a href="https://npm.im/next-auth">
+        <img src="https://img.shields.io/badge/TypeScript-blue?style=flat-square" alt="TypeScript" />
+      </a>
+   </p>
+</p>
+
+# Documentation
+
+- [sveltekit.authjs.dev](https://sveltekit.authjs.dev)

apps/dev/otp-example/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "sveltekit-otp-app",
+  "version": "1.0.0",
+  "description": "SvelteKit + Auth.js Developer app",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "next",
+    "@sveltejs/kit": "next",
+    "svelte": "3.55.0",
+    "svelte-check": "2.10.2",
+    "typescript": "5.2.2",
+    "vite": "4.0.5"
+  },
+  "dependencies": {
+    "@auth/core": "workspace:*",
+    "@auth/sveltekit": "workspace:*",
+    "@sendgrid/mail": "^7.7.0"
+  },
+  "type": "module"
+}

apps/dev/otp-example/src/app.d.ts

@@ -0,0 +1 @@
+/// <reference types="@auth/sveltekit" />

apps/dev/otp-example/src/app.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
+    <meta name="viewport" content="width=device-width" />
+    %sveltekit.head%
+  </head>
+
+  <body>
+    <div>%sveltekit.body%</div>
+  </body>
+</html>

apps/dev/otp-example/src/hooks.server.ts

@@ -0,0 +1,79 @@
+import { SvelteKitAuth } from "@auth/sveltekit"
+import GitHub from "@auth/core/providers/github"
+// import { GITHUB_ID, GITHUB_SECRET } from "$env/static/private"
+import Credentials from "@auth/core/providers/credentials"
+// import Email from "@auth/core/providers/email"
+import OTP from "@auth/core/providers/otp"
+import type { Provider } from "@auth/core/providers"
+
+import { TestAdapter } from "./testAdapter"
+
+const db: Record<string, any> = {}
+
+import sgMail from "@sendgrid/mail"
+import { MAIL_API_KEY, MAIL_VERIFIED_DOMAIN } from "$env/static/private"
+
+export const handle = SvelteKitAuth({
+  debug: true,
+  adapter: TestAdapter({
+    getItem(key) {
+      return db[key]
+    },
+    setItem: function (key: string, value: string): Promise<void> {
+      db[key] = value
+      return Promise.resolve()
+    },
+    deleteItems: function (...keys: string[]): Promise<void> {
+      keys.forEach((key) => delete db[key])
+      return Promise.resolve()
+    },
+  }),
+  providers: [
+    // Credentials({
+    //   credentials: { password: { label: "Password", type: "password" } },
+    //   async authorize(credentials) {
+    //     if (credentials.password !== "pw") return null
+    //     return {
+    //       name: "Fill Murray",
+    //       email: "[email protected]",
+    //       image: "https://www.fillmurray.com/64/64",
+    //       id: "1",
+    //       foo: "",
+    //     }
+    //   },
+    // }),
+    OTP({
+      async sendVerificationRequest({ identifier, token, provider }) {
+        console.log(`SENDING VERIFICATION ${token} to ${identifier} `)
+        // comment out the rest of this function to test without actually sending email
+        // otp token is hardcoded to 123456
+        sgMail.setApiKey(MAIL_API_KEY)
+        // console.log(MAIL_FROM)
+        const message = {
+          to: identifier,
+          from: `noreply@${MAIL_VERIFIED_DOMAIN}`,
+          subject: "Sign in to My App",
+          html: `Your OTP code is ${token}`,
+          text: `Your OTP code is ${token}`,
+        }
+        try {
+          const resp = await sgMail.send(message)
+          console.log({ resp })
+        } catch (e: any) {
+          console.error(e)
+          console.log(e.response.body.errors)
+        }
+      },
+    }),
+    // NOTE: You can start a fake e-mail server with `pnpm email`
+    // and then go to `http://localhost:1080` in the browser
+    // Email({
+    //   async sendVerificationRequest(params) {
+    //     console.log({ params })
+    //   },
+    // }),
+    // GitHub({ clientId: GITHUB_ID, clientSecret: GITHUB_SECRET })
+  ] as Provider[],
+  secret: "some-secret",
+  trustHost: true,
+})

apps/dev/otp-example/src/lib/SignInButton.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let provider: any
+</script>
+
+<form action={provider.signinUrl} method="POST">
+  {#if provider.callbackUrl}
+    <input type="hidden" name="callbackUrl" value={provider.callbackUrl} />
+  {/if}
+  <button type="submit" class="button">
+    <slot>Sign in with {provider.name}</slot>
+  </button>
+</form>

apps/dev/otp-example/src/routes/+layout.server.ts

@@ -0,0 +1,7 @@
+import type { LayoutServerLoad } from "./$types"
+
+export const load: LayoutServerLoad = async (event) => {
+  return {
+    session: await event.locals.getSession(),
+  }
+}