├── src
    ├── stytch.js
    ├── main.js
    ├── App.vue
    ├── views
    │   ├── ProfileView.vue
    │   ├── AuthenticateView.vue
    │   └── LoginView.vue
    └── router
    │   └── index.js
├── .prettierrc.json
├── .eslintrc.cjs
├── vite.config.js
├── .gitignore
├── package.json
├── public
    ├── github.svg
    ├── favicon.svg
    ├── stytch.css
    └── logo.svg
├── index.html
└── README.md


/src/stytch.js:
--------------------------------------------------------------------------------
1 | import { StytchUIClient } from '@stytch/vanilla-js'
2 | 
3 | export default new StytchUIClient(import.meta.env.VITE_STYTCH_PUBLIC_TOKEN)
4 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://json.schemastore.org/prettierrc",
3 |   "semi": false,
4 |   "tabWidth": 2,
5 |   "singleQuote": true,
6 |   "printWidth": 100,
7 |   "trailingComma": "none"
8 | }


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import { createApp } from 'vue'
 2 | import App from './App.vue'
 3 | import router from './router'
 4 | 
 5 | const app = createApp(App)
 6 | 
 7 | app.use(router)
 8 | 
 9 | app.mount('#app')
10 | 


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | require('@rushstack/eslint-patch/modern-module-resolution')
 3 | 
 4 | module.exports = {
 5 |   root: true,
 6 |   'extends': [
 7 |     'plugin:vue/vue3-essential',
 8 |     'eslint:recommended',
 9 |     '@vue/eslint-config-prettier/skip-formatting'
10 |   ],
11 |   parserOptions: {
12 |     ecmaVersion: 'latest'
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from 'node:url'
 2 | 
 3 | import { defineConfig } from 'vite'
 4 | import vue from '@vitejs/plugin-vue'
 5 | import vueJsx from '@vitejs/plugin-vue-jsx'
 6 | 
 7 | // https://vitejs.dev/config/
 8 | export default defineConfig({
 9 |   plugins: [vue(), vueJsx()],
10 |   resolve: {
11 |     alias: {
12 |       '@': fileURLToPath(new URL('./src', import.meta.url))
13 |     }
14 |   }
15 | })
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | 
 5 | /node_modules
 6 | /.pnp
 7 | .pnp.js
 8 | 
 9 | # testing
10 | 
11 | /coverage
12 | 
13 | # production
14 | 
15 | /build
16 | 
17 | # misc
18 | 
19 | .DS_Store
20 | .env.local
21 | .env.development.local
22 | .env.test.local
23 | .env.production.local
24 | 
25 | npm-debug.log*
26 | yarn-debug.log*
27 | yarn-error.log\*
28 | 
29 | # Environment variables
30 | 
31 | .env
32 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onBeforeUnmount } from 'vue'
 3 | import { RouterView } from 'vue-router'
 4 | import stytch from './stytch'
 5 | import router from './router'
 6 | /*
 7 | Session logic
 8 | 
 9 | The logic below listens to changes on the Stytch Session to:
10 | - redirect newly authenticated traffic to /profile.
11 | - redirect the user to login view if they log out.
12 | */
13 | const unsubscribe = stytch.session.onChange((session) => {
14 |   console.log('ONCHANGE', session)
15 |   if (session) {
16 |     router.push({ name: 'profile' })
17 |   } else {
18 |     router.push({ name: 'login' })
19 |   }
20 | })
21 | 
22 | onBeforeUnmount(() => {
23 |   unsubscribe && unsubscribe()
24 | })
25 | </script>
26 | 
27 | <template>
28 |   <RouterView />
29 | </template>
30 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "stytch-vue-example",
 3 |   "version": "0.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "vite --host localhost --port 3000",
 7 |     "build": "vite build",
 8 |     "preview": "vite preview",
 9 |     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
10 |     "format": "prettier --write src/"
11 |   },
12 |   "dependencies": {
13 |     "@stytch/vanilla-js": "^0.10.2",
14 |     "vue": "^3.2.47",
15 |     "vue-router": "^4.1.6"
16 |   },
17 |   "devDependencies": {
18 |     "@rushstack/eslint-patch": "^1.2.0",
19 |     "@vitejs/plugin-vue": "^4.0.0",
20 |     "@vitejs/plugin-vue-jsx": "^3.0.0",
21 |     "@vue/eslint-config-prettier": "^7.1.0",
22 |     "eslint": "^8.34.0",
23 |     "eslint-plugin-vue": "^9.9.0",
24 |     "prettier": "^2.8.4",
25 |     "vite": "^4.1.4"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/src/views/ProfileView.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import stytch from '../stytch'
 3 | let user = stytch.user.getSync()
 4 | let session = stytch.session.getSync()
 5 | 
 6 | function logout() {
 7 |   stytch.session.revoke()
 8 | }
 9 | </script>
10 | <template>
11 |   <div class="container">
12 |     <div class="card">
13 |       <h1>Profile</h1>
14 |       <h2>User object</h2>
15 |       <pre class="code-block">{{ user }}</pre>
16 | 
17 |       <h2>Session object</h2>
18 |       <pre class="code-block">{{ session }}</pre>
19 |       <p>
20 |         You are logged in, and a Session has been created. The SDK stores the Session as a token and
21 |         a JWT in the browser cookies as
22 |         <span class="code">stytch_session</span> and
23 |         <span class="code">stytch_session_jwt</span> respectively.
24 |       </p>
25 |       <button @click="logout" class="primary">Log out</button>
26 |     </div>
27 |   </div>
28 | </template>
29 | 


--------------------------------------------------------------------------------
/public/github.svg:
--------------------------------------------------------------------------------
1 | <svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#24292f"/></svg>


--------------------------------------------------------------------------------
/src/views/AuthenticateView.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import stytch from '../stytch'
 3 | // Look for the Stytch token in query params.
 4 | const queryParams = new URLSearchParams(window.location.search)
 5 | const token = queryParams.get('token')
 6 | const tokenType = queryParams.get('stytch_token_type')
 7 | 
 8 | // If a token is found, authenticate it with the appropriate method.
 9 | if (token && tokenType) {
10 |   if (tokenType === 'magic_links') {
11 |     stytch.magicLinks
12 |       .authenticate(token, {
13 |         session_duration_minutes: 60
14 |       })
15 |       .then(() => console.log('Successful authentication: Email magic link'))
16 |       .catch((err) => {
17 |         console.error(err)
18 |         alert('Email Magic Link authentication failed. See console for details.')
19 |       })
20 |   }
21 | } else {
22 |   // If query params are not found, announce that something went wrong.
23 |   alert('Something went wrong. No token found to authenticate.')
24 | }
25 | </script>
26 | <template>
27 |   <div class="container">Authenticating...</div>
28 | </template>
29 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |     <meta name="theme-color" content="#000000" />
 9 |     <meta
10 |       name="description"
11 |       content="An example Vue application using Stytch for authentication"
12 |     />
13 |     <title>Stytch Vue Example</title>
14 |     <link rel="stylesheet" href="stytch.css" />
15 |   </head>
16 |   <body>
17 |     <header>
18 |       <a class="header" href="/">
19 |         <img src="logo.svg" width="190px"/>
20 |       </a>
21 |       <div class="link-container">
22 |         <a class="header" target="_blank" href="https://www.stytch.com/docs">Stytch Docs</a>
23 |         <a class="header" target="_blank" href="https://www.github.com/stytchauth/stytch-vue-example">
24 |           <img src="github.svg" width="20px" style="margin-right: 4px;"></img>
25 |           View on Github 
26 |         </a>
27 |       </div>
28 |     </header>
29 |     <main id="app"></main>
30 |     <script type="module" src="/src/main.js"></script>
31 |   </body>
32 | </html>
33 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router'
 2 | import AuthenticateView from '../views/AuthenticateView.vue'
 3 | import LoginView from '../views/LoginView.vue'
 4 | import ProfileView from '../views/ProfileView.vue'
 5 | import stytch from '../stytch'
 6 | 
 7 | export const ROUTES = {
 8 |   LOGIN: 'login',
 9 |   AUTHENTICATE: 'authenticate',
10 |   PROFILE: 'profile'
11 | }
12 | 
13 | const router = createRouter({
14 |   history: createWebHistory(import.meta.env.BASE_URL),
15 |   routes: [
16 |     {
17 |       path: '/',
18 |       name: ROUTES.LOGIN,
19 |       component: LoginView,
20 |       meta: { requiresAuth: false }
21 |     },
22 |     {
23 |       path: '/authenticate',
24 |       name: ROUTES.AUTHENTICATE,
25 |       component: AuthenticateView,
26 |       meta: { requiresAuth: false }
27 |     },
28 |     {
29 |       path: '/profile',
30 |       name: ROUTES.PROFILE,
31 |       component: ProfileView,
32 |       meta: { requiresAuth: true }
33 |     }
34 |   ]
35 | })
36 | 
37 | // When navigating to authenticated routes check for a session
38 | router.beforeEach((to) => {
39 |   if (to.meta.requiresAuth && !stytch.session.getSync()) {
40 |     return {
41 |       name: ROUTES.LOGIN
42 |     }
43 |   }
44 | })
45 | 
46 | export default router
47 | 


--------------------------------------------------------------------------------
/src/views/LoginView.vue:
--------------------------------------------------------------------------------
 1 | <script setup>
 2 | import { onMounted } from 'vue'
 3 | import stytch from '../stytch'
 4 | import { Products } from '@stytch/vanilla-js'
 5 | 
 6 | const styles = {
 7 |   container: {
 8 |     width: '100%'
 9 |   },
10 |   buttons: {
11 |     primary: {
12 |       backgroundColor: '#4A37BE',
13 |       borderColor: '#4A37BE'
14 |     }
15 |   }
16 | }
17 | 
18 | const REDIRECT_URL = 'http://localhost:3000/authenticate'
19 | const config = {
20 |   products: [Products.emailMagicLinks],
21 |   emailMagicLinksOptions: {
22 |     loginRedirectURL: REDIRECT_URL,
23 |     loginExpirationMinutes: 60,
24 |     signupRedirectURL: REDIRECT_URL,
25 |     signupExpirationMinutes: 60
26 |   }
27 | }
28 | 
29 | /*
30 | The Stytch JavaScript SDKs offer callbacks that help you track where users are in the authentication flow.
31 | You can also use these callbacks to trigger actions in your application.
32 | 
33 | For example, you can use a the onEvent callback with a 200 on PASSWORD_AUTHENTICATE to trigger a redirect
34 | to a protected page after a user successfully logs in.
35 | */
36 | const callbacks = {
37 |   onEvent: (message) => console.log(message),
38 |   onError: (error) => console.log(error)
39 | }
40 | 
41 | // lifecycle hooks
42 | onMounted(() => {
43 |   stytch.mountLogin({
44 |     elementId: '#stytch-sdk',
45 |     styles,
46 |     config,
47 |     callbacks
48 |   })
49 | })
50 | </script>
51 | <template>
52 |   <div class="container">
53 |     <div id="stytch-sdk"></div>
54 |   </div>
55 | </template>
56 | 


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <rect width="100" height="100" rx="50" fill="#d4ceff"/>
3 | <path d="M48.4238 67.7759C49.8284 67.8038 51.2313 67.6618 52.6026 67.3518C53.5375 67.1297 54.4233 66.7323 55.2143 66.1801C55.8355 65.7487 56.3171 65.1408 56.5985 64.4321C56.8766 63.704 57.0183 62.9292 57.0164 62.1483C57.0066 61.2649 56.7763 60.3984 56.347 59.6297C55.9177 58.8609 55.3034 58.2147 54.5613 57.7518C52.9247 56.6044 50.1106 55.3576 46.119 54.0112C44.3779 53.3887 42.6367 52.6739 40.8956 51.8663C39.196 51.0915 37.6168 50.0697 36.2076 48.8338C34.8122 47.59 33.668 46.0834 32.8384 44.3979C31.9176 42.4192 31.4702 40.2485 31.5326 38.0617C31.4957 35.7438 31.9662 33.4464 32.9103 31.335C33.8209 29.3583 35.16 27.6155 36.8278 26.237C38.6496 24.7674 40.7366 23.6722 42.9719 23.0127C45.6123 22.2234 48.3549 21.8418 51.1074 21.8806C54.241 21.8229 57.3668 22.2152 60.3919 23.0458C62.622 23.6744 64.7815 24.5353 66.8363 25.6147L63.3826 35.1817C61.7909 34.3594 60.1358 33.6707 58.4335 33.1226C56.3152 32.4853 54.1128 32.1838 51.9039 32.2288C49.0354 32.2288 46.9765 32.6305 45.7273 33.4338C45.1144 33.8205 44.6162 34.3679 44.2851 35.0183C43.9541 35.6687 43.8026 36.3977 43.8468 37.1282C43.8046 38.0147 44.0375 38.8922 44.5128 39.6375C45.0362 40.3755 45.7027 40.9973 46.4716 41.4648C47.3938 42.0516 48.3689 42.5479 49.3836 42.9477C50.4849 43.3894 51.7015 43.8415 53.0335 44.305C55.7976 45.3426 58.2025 46.3661 60.2483 47.377C62.1194 48.2635 63.8373 49.4509 65.3344 50.8925C66.6819 52.2243 67.7189 53.8437 68.3705 55.633C69.0838 57.7639 69.4218 60.0046 69.3698 62.2539C69.3698 67.2856 67.6285 71.1876 64.1461 73.9593C60.6642 76.7315 55.4232 78.1197 48.4238 78.124C46.2943 78.1386 44.1666 77.9948 42.0578 77.6938C40.3617 77.4511 38.6825 77.0992 37.0303 76.6411C35.7481 76.2874 34.4916 75.845 33.2694 75.3166C32.2247 74.8469 31.3106 74.4095 30.625 73.9926L34.0007 64.3459C35.8725 65.344 37.8419 66.1401 39.877 66.7232C42.6628 67.4804 45.5402 67.8348 48.4238 67.7759Z" fill="#19303D"/>
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/public/stytch.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   font-family: Arial, Helvetica, sans-serif;
  5 |   color: rgb(25, 48, 61);
  6 |   box-sizing: border-box;
  7 | }
  8 | 
  9 | h1 {
 10 |   font-size: 24px;
 11 |   font-weight: 600;
 12 |   margin-bottom: 16px;
 13 | }
 14 | 
 15 | h2 {
 16 |   font-size: 20px;
 17 |   font-weight: 500;
 18 |   line-height: '30px';
 19 |   margin-bottom: 4px;
 20 | }
 21 | 
 22 | p {
 23 |   font-size: 18px;
 24 |   font-weight: 400;
 25 |   margin-bottom: 16px;
 26 | }
 27 | 
 28 | main {
 29 |   display: flex;
 30 |   min-height: calc(100vh - 70px);
 31 |   justify-content: center;
 32 |   align-items: center;
 33 |   flex-direction: column;
 34 |   padding: 36px 0px;
 35 | }
 36 | 
 37 | .container {
 38 |   max-width: 650px;
 39 |   width: 100%;
 40 |   padding: 0 16px;
 41 | }
 42 | 
 43 | .card {
 44 |   width: 100%;
 45 |   padding: 24px 32px;
 46 |   border: 1px solid rgb(173, 188, 197);
 47 |   border-radius: 8px;
 48 |   display: flex;
 49 |   flex-direction: column;
 50 |   align-items: center;
 51 | }
 52 | 
 53 | button.primary {
 54 |   width: 100%;
 55 |   height: 45px;
 56 |   cursor: pointer;
 57 |   font-size: 18px;
 58 |   color: white;
 59 |   background-color: #4a37be;
 60 |   border: none;
 61 |   border-radius: 4px;
 62 | }
 63 | 
 64 | pre.code-block {
 65 |   max-height: 200px;
 66 |   width: 100%;
 67 |   overflow: scroll;
 68 |   background-color: #10232e;
 69 |   border: none;
 70 |   border-radius: 4px;
 71 |   padding: 16px 8px;
 72 |   margin-bottom: 16px;
 73 |   color: white;
 74 |   font-family: monospace;
 75 | }
 76 | 
 77 | span.code {
 78 |   font-family: monospace;
 79 |   font-weight: 400;
 80 |   line-height: 28px;
 81 |   padding-left: 4px;
 82 |   border-radius: 4px;
 83 |   padding-right: 4px;
 84 |   background-color: #ecfaff;
 85 | }
 86 | 
 87 | header {
 88 |   width: 100%;
 89 |   height: 70px;
 90 |   background-color: #eeecff;
 91 |   display: flex;
 92 |   align-items: center;
 93 |   justify-content: space-between;
 94 |   padding: 0 16px;
 95 |   gap: 16px;
 96 | }
 97 | 
 98 | header > img {
 99 |   max-width: 250px;
100 |   height: 100%;
101 |   overflow: hidden;
102 | }
103 | 
104 | a.header {
105 |   font-size: 16px;
106 |   font-weight: 600;
107 |   text-decoration: none;
108 |   display: flex;
109 |   align-items: center;
110 |   padding: 8px;
111 |   border-radius: 4px;
112 | }
113 | 
114 | a.header:hover {
115 |   background-color: #d4ceff;
116 | }
117 | 
118 | header > .link-container {
119 |   display: flex;
120 |   gap: 16px;
121 | }
122 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Stytch Vue example application
 2 | 
 3 | <p align="center">
 4 |   <img src="https://user-images.githubusercontent.com/100632220/217049841-b9eeb72a-3e50-4074-839a-e64ee5d4a88c.png" width="750">
 5 | </p>
 6 | 
 7 | ## Overview
 8 | 
 9 | This example application demonstrates how one may use Stytch within a Vue application. This project was bootstrapped with [create-vue](https://github.com/vuejs/create-vue).
10 | 
11 | This project uses Stytch's [JavaScript SDK](https://stytch.com/docs/sdks/javascript-sdk) which provides pre-built UI components and headless methods to securely interact with Stytch.
12 | 
13 | This application features Email Magic Links for authentication, as well as our Sessions Management product to manage user sessions. You can use this application's source code as a learning resource, or use it as a jumping off point for your own project. We are excited to see what you build with Stytch!
14 | 
15 | ## Set up
16 | 
17 | Follow the steps below to get this application fully functional and running using your own Stytch credentials.
18 | 
19 | ### In the Stytch Dashboard
20 | 
21 | 1. Create a [Stytch](https://stytch.com/) account. Once your account is set up a Project called "My first project" will be automatically created for you.
22 | 
23 | 2. Within your new Project, navigate to [SDK configuration](https://stytch.com/dashboard/sdk-configuration), and make the following changes:
24 | 
25 |    - Click **Enable SDK**.
26 |    - Under **Authorized environments** add the domain `http://localhost:3000`.
27 |      <img width="400" alt="Authorized environments" src="https://user-images.githubusercontent.com/100632220/217052985-2e6fc264-7b8b-452b-9d24-66a76c143d10.png">
28 | 
29 |    - Within the **Email Magic Links** drawer, toggle on **Enable the LoginOrCreate Flow**.
30 |      <img width="400" alt="SDK Email Magic Links" src="https://user-images.githubusercontent.com/100632220/217053215-8c369de8-7828-4ad6-ac88-a50918520fc3.png">
31 | 
32 | 3. Navigate to [Redirect URLs](https://stytch.com/dashboard/redirect-urls), and add `http://localhost:3000` as the types **Login** and **Sign-up**.
33 |    <img width="400" alt="Redirect URLs" src="https://user-images.githubusercontent.com/100632220/217054016-913cabda-098e-4436-9829-2f33e7db05a7.png">
34 | 
35 | 4. Finally, navigate to [API Keys](https://stytch.com/dashboard/api-keys), and copy your `public_token`. You will need this value later on.
36 | 
37 | ### On your machine
38 | 
39 | In your terminal clone the project and install dependencies:
40 | 
41 | ```bash
42 | git clone https://github.com/stytchauth/stytch-vue-example.git
43 | cd stytch-vue-example
44 | npm i
45 | ```
46 | 
47 | Next, create `.env.local` file by running the command below and your `public_token`. Learn more about Vue's support for [custom environment variables here](https://cli.vuejs.org/guide/mode-and-env.html#environment-variables).
48 | 
49 | ```bash
50 | echo "VITE_STYTCH_PUBLIC_TOKEN=YOUR_TOKEN_HERE" > .env.local
51 | # For example, echo "VITE_STYTCH_PUBLIC_TOKEN=public-token-test-123abcd-1234-1234-abcd-123123abcabc" > .env.local
52 | ```
53 | 
54 | ## Running locally
55 | 
56 | After completing all the set up steps above the application can be run with the command:
57 | 
58 | ```bash
59 | npm run dev
60 | ```
61 | 
62 | The application will be available at [`http://localhost:3000`](http://localhost:3000).
63 | 
64 | You'll be able to login with Email Magic Links and see your Stytch User object, Stytch Session, and see how logging out works.
65 | 
66 | ## Next steps
67 | 
68 | This example app showcases a small portion of what you can accomplish with Stytch. Here are a few ideas to explore:
69 | 
70 | 1. Add additional login methods like [Passwords](https://stytch.com/docs/passwords#guides_getting-started-sdk).
71 | 2. Replace the prebuilt UI with your own using by using the SDK's [headless methods](https://stytch.com/docs/sdks/javascript-sdk).
72 | 3. Add a Google OAuth button with the high converting [Google One Tap UI](https://stytch.com/docs/oauth#guides_google-sdk).
73 | 4. Secure your app further by building MFA authentication using methods like [WebAuthn](https://stytch.com/docs/sdks/javascript-sdk#webauthn).
74 | 5. Use [Stytch Sessions](https://stytch.com/docs/sessions) to secure your backend.
75 | 
76 | ## Get help and join the community
77 | 
78 | #### :speech_balloon: Stytch community Slack
79 | 
80 | Join the discussion, ask questions, and suggest new features in our ​[Slack community](https://stytch.com/docs/resources/support/overview)!
81 | 
82 | #### :question: Need support?
83 | 
84 | Check out the [Stytch Forum](https://forum.stytch.com/) or email us at [support@stytch.com](mailto:support@stytch.com).
85 | 


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="162" height="19" viewBox="0 0 162 19" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M29.2941 9.87823V15.1389H32.3333V9.87823C33.2229 8.48408 36.8173 2.0606 37.1517 1.39513H33.6174C33.0657 2.36838 29.2941 9.87823 29.2941 9.87823ZM30.0831 5.38633L28.4113 8.39931C27.5871 6.96857 25.2349 2.86749 24.4807 1.38514H28.0252L30.0831 5.38633Z" fill="#19303D"/>
 3 | <path d="M4.97383 12.7266C5.33349 12.7336 5.69269 12.6979 6.04381 12.62C6.2832 12.5642 6.51 12.4644 6.71254 12.3256C6.8716 12.2172 6.99492 12.0644 7.06696 11.8864C7.13818 11.7034 7.17447 11.5087 7.17397 11.3125C7.17147 11.0905 7.1125 10.8728 7.00258 10.6796C6.89265 10.4864 6.73536 10.324 6.54535 10.2077C6.12628 9.9194 5.40572 9.60608 4.38367 9.26776C3.93786 9.11133 3.49202 8.93172 3.04621 8.72879C2.61102 8.53409 2.20666 8.27734 1.84583 7.96676C1.48854 7.65421 1.19557 7.27563 0.983153 6.85208C0.74739 6.35489 0.632817 5.80942 0.648797 5.25991C0.639344 4.67745 0.759831 4.10016 1.00155 3.5696C1.23471 3.07287 1.5776 2.63495 2.00465 2.28855C2.47112 1.91926 3.0055 1.64406 3.57785 1.47833C4.25393 1.28 4.95617 1.1841 5.66096 1.19384C6.46332 1.17934 7.2637 1.27793 8.03828 1.48665C8.60931 1.64461 9.16225 1.86093 9.68838 2.13217L8.80404 4.53621C8.3965 4.32957 7.97271 4.15652 7.53682 4.0188C6.99443 3.85865 6.4305 3.78289 5.86492 3.7942C5.13043 3.7942 4.60324 3.89513 4.28337 4.09698C4.12645 4.19415 3.99887 4.33172 3.91409 4.49515C3.82934 4.65858 3.79056 4.84177 3.80188 5.02534C3.79106 5.24809 3.85071 5.4686 3.97241 5.65588C4.10642 5.84132 4.27708 5.99758 4.47395 6.11504C4.71009 6.26249 4.95977 6.38721 5.21959 6.48769C5.50157 6.59868 5.81309 6.71227 6.15415 6.82875C6.86189 7.08947 7.47768 7.34668 8.00151 7.60069C8.48061 7.82344 8.92048 8.12182 9.30382 8.48408C9.64885 8.81875 9.91437 9.22568 10.0812 9.6753C10.2638 10.2108 10.3504 10.7738 10.3371 11.339C10.3371 12.6034 9.89124 13.5839 8.99954 14.2804C8.108 14.977 6.76604 15.3259 4.97383 15.3269C4.42857 15.3306 3.88376 15.2944 3.34379 15.2188C2.90949 15.1578 2.47953 15.0694 2.05648 14.9543C1.72819 14.8654 1.40645 14.7543 1.0935 14.6215C0.826003 14.5035 0.591956 14.3935 0.416405 14.2888L1.28075 11.8647C1.76003 12.1155 2.26432 12.3156 2.78539 12.4621C3.49872 12.6524 4.23547 12.7414 4.97383 12.7266Z" fill="#19303D"/>
 4 | <path d="M22.9043 1.39342V4.07364H18.7748V15.1505H15.722V4.07364H11.4137V1.39342H22.9043Z" fill="#19303D"/>
 5 | <path d="M50.3007 1.39342V4.07364H46.1796V15.1505H43.1184V4.07364H38.8101V1.39342H50.3007Z" fill="#19303D"/>
 6 | <path d="M58.1432 15.3368C55.9999 15.3368 54.3676 14.7268 53.2464 13.5068C52.1252 12.2867 51.564 10.5488 51.5629 8.29273C51.5456 7.27151 51.7196 6.25594 52.0762 5.29814C52.3879 4.46888 52.867 3.71188 53.4839 3.07378C54.0842 2.46614 54.8113 1.99703 55.6137 1.69957C56.4691 1.38175 57.3758 1.22273 58.2886 1.23042C58.7987 1.22686 59.3078 1.26917 59.81 1.35686C60.2153 1.43018 60.6155 1.52797 61.0088 1.64967C61.3046 1.74182 61.5925 1.85754 61.8698 1.99571C62.0989 2.11217 62.2626 2.20367 62.3713 2.26856L61.5153 4.72583C61.0648 4.48775 60.5902 4.29813 60.0993 4.16018C59.5005 3.99567 58.8814 3.91669 58.2603 3.9256C57.8042 3.92617 57.3516 4.00555 56.9227 4.16018C56.4833 4.3191 56.0863 4.57638 55.7626 4.91216C55.4029 5.29483 55.1278 5.74822 54.955 6.24311C54.7367 6.88562 54.6337 7.56151 54.6507 8.23952C54.6449 8.82576 54.7094 9.41047 54.843 9.98145C54.9601 10.4855 55.1804 10.9601 55.49 11.3756C55.7986 11.7746 56.2003 12.0927 56.6603 12.3023C57.2105 12.5441 57.8078 12.6606 58.409 12.6434C58.7973 12.6461 59.1851 12.6199 59.5693 12.5651C59.877 12.5211 60.1819 12.4589 60.4822 12.3788C60.7224 12.3185 60.9576 12.2399 61.186 12.1442C61.3889 12.0522 61.5727 11.9673 61.7377 11.8897L62.5636 14.322C62.01 14.6373 61.4145 14.8736 60.7947 15.0241C59.9289 15.2457 59.0372 15.3509 58.1432 15.3368Z" fill="#19303D"/>
 7 | <path d="M73.1312 1.41341H76.363V15.1755H73.1312V9.27767H67.9235V15.1755H64.8691V1.41341H67.9235V6.59578H73.1312V1.41341Z" fill="#19303D"/>
 8 | <path d="M82.64 15V1.04H91.84V3.38H85.28V6.76H91.08V9.1H85.28V12.66H91.84V15H82.64Z" fill="#4A37BE"/>
 9 | <path d="M93.3722 15L96.9322 9.7L93.4522 4.56H96.3722L98.5322 8.02H98.6122L100.752 4.56H103.472L99.9322 9.74L103.492 15H100.572L98.3722 11.4H98.2922L96.0922 15H93.3722Z" fill="#4A37BE"/>
10 | <path d="M113.031 15C112.471 15 112.024 14.84 111.691 14.52C111.371 14.1867 111.171 13.7467 111.091 13.2H110.971C110.798 13.88 110.444 14.3933 109.911 14.74C109.378 15.0733 108.718 15.24 107.931 15.24C106.864 15.24 106.044 14.96 105.471 14.4C104.898 13.84 104.611 13.0933 104.611 12.16C104.611 11.08 104.998 10.28 105.771 9.76C106.544 9.22667 107.644 8.96 109.071 8.96H110.851V8.2C110.851 7.61333 110.698 7.16 110.391 6.84C110.084 6.52 109.591 6.36 108.911 6.36C108.311 6.36 107.824 6.49333 107.451 6.76C107.091 7.01333 106.784 7.32 106.531 7.68L105.011 6.32C105.398 5.72 105.911 5.24 106.551 4.88C107.191 4.50667 108.038 4.32 109.091 4.32C110.504 4.32 111.578 4.64 112.311 5.28C113.044 5.92 113.411 6.84 113.411 8.04V12.96H114.451V15H113.031ZM108.791 13.38C109.364 13.38 109.851 13.2533 110.251 13C110.651 12.7467 110.851 12.3733 110.851 11.88V10.5H109.211C107.878 10.5 107.211 10.9267 107.211 11.78V12.12C107.211 12.5467 107.344 12.8667 107.611 13.08C107.891 13.28 108.284 13.38 108.791 13.38Z" fill="#4A37BE"/>
11 | <path d="M116.523 15V4.56H119.083V6.3H119.183C119.383 5.75333 119.703 5.28667 120.143 4.9C120.583 4.51333 121.196 4.32 121.983 4.32C122.703 4.32 123.323 4.49333 123.843 4.84C124.363 5.18667 124.75 5.71333 125.003 6.42H125.043C125.23 5.83333 125.596 5.34 126.143 4.94C126.703 4.52667 127.403 4.32 128.243 4.32C129.27 4.32 130.056 4.67333 130.603 5.38C131.163 6.08667 131.443 7.09333 131.443 8.4V15H128.883V8.66C128.883 7.16667 128.323 6.42 127.203 6.42C126.95 6.42 126.703 6.46 126.463 6.54C126.236 6.60667 126.03 6.71333 125.843 6.86C125.67 6.99333 125.53 7.16667 125.423 7.38C125.316 7.58 125.263 7.82 125.263 8.1V15H122.703V8.66C122.703 7.16667 122.143 6.42 121.023 6.42C120.783 6.42 120.543 6.46 120.303 6.54C120.076 6.60667 119.87 6.71333 119.683 6.86C119.51 6.99333 119.363 7.16667 119.243 7.38C119.136 7.58 119.083 7.82 119.083 8.1V15H116.523Z" fill="#4A37BE"/>
12 | <path d="M134.277 4.56H136.837V6.28H136.917C137.104 5.68 137.457 5.20667 137.977 4.86C138.497 4.5 139.104 4.32 139.797 4.32C141.13 4.32 142.144 4.79333 142.837 5.74C143.544 6.67333 143.897 8.01333 143.897 9.76C143.897 11.52 143.544 12.8733 142.837 13.82C142.144 14.7667 141.13 15.24 139.797 15.24C139.104 15.24 138.497 15.06 137.977 14.7C137.47 14.34 137.117 13.86 136.917 13.26H136.837V19H134.277V4.56ZM138.977 13.12C139.644 13.12 140.184 12.9 140.597 12.46C141.01 12.02 141.217 11.4267 141.217 10.68V8.88C141.217 8.13333 141.01 7.54 140.597 7.1C140.184 6.64667 139.644 6.42 138.977 6.42C138.364 6.42 137.85 6.57333 137.437 6.88C137.037 7.18667 136.837 7.59333 136.837 8.1V11.42C136.837 11.9667 137.037 12.3867 137.437 12.68C137.85 12.9733 138.364 13.12 138.977 13.12Z" fill="#4A37BE"/>
13 | <path d="M148.829 15C147.949 15 147.302 14.78 146.889 14.34C146.476 13.9 146.269 13.28 146.269 12.48V0.2H148.829V12.96H150.209V15H148.829Z" fill="#4A37BE"/>
14 | <path d="M156.368 15.24C155.595 15.24 154.901 15.1133 154.288 14.86C153.688 14.5933 153.175 14.2267 152.748 13.76C152.335 13.28 152.015 12.7067 151.788 12.04C151.561 11.36 151.448 10.6 151.448 9.76C151.448 8.93333 151.555 8.18667 151.768 7.52C151.995 6.85333 152.315 6.28667 152.728 5.82C153.141 5.34 153.648 4.97333 154.248 4.72C154.848 4.45333 155.528 4.32 156.288 4.32C157.101 4.32 157.808 4.46 158.408 4.74C159.008 5.02 159.501 5.4 159.888 5.88C160.275 6.36 160.561 6.92 160.748 7.56C160.948 8.18667 161.048 8.86 161.048 9.58V10.42H154.108V10.68C154.108 11.44 154.321 12.0533 154.748 12.52C155.175 12.9733 155.808 13.2 156.648 13.2C157.288 13.2 157.808 13.0667 158.208 12.8C158.621 12.5333 158.988 12.1933 159.308 11.78L160.688 13.32C160.261 13.92 159.675 14.3933 158.928 14.74C158.195 15.0733 157.341 15.24 156.368 15.24ZM156.328 6.24C155.648 6.24 155.108 6.46667 154.708 6.92C154.308 7.37333 154.108 7.96 154.108 8.68V8.84H158.388V8.66C158.388 7.94 158.208 7.36 157.848 6.92C157.501 6.46667 156.995 6.24 156.328 6.24Z" fill="#4A37BE"/>
15 | </svg>
16 | 


--------------------------------------------------------------------------------