Getting Started

Example Pages

This guide demonstrates how to integrate Stack Auth with Vite. The same principles apply to other JavaScript frameworks as well. You can find the complete example code in our GitHub repository.

Initialize the app

stack.ts
1import { StackClientApp } from "@stackframe/js";
2
3// Add type declaration for Vite's import.meta.env
4declare global {
5  interface ImportMeta {
6    env: {
7      VITE_STACK_API_URL: string;
8      VITE_STACK_PROJECT_ID: string;
9      VITE_STACK_PUBLISHABLE_CLIENT_KEY: string;
10    };
11  }
12}
13
14export const stackClientApp = new StackClientApp({
15  baseUrl: import.meta.env.VITE_STACK_API_URL,
16  projectId: import.meta.env.VITE_STACK_PROJECT_ID,
17  publishableClientKey: import.meta.env.VITE_STACK_PUBLISHABLE_CLIENT_KEY,
18  tokenStore: "cookie",
19  urls: {
20    oauthCallback: window.location.origin + "/oauth",
21  },
22});

Index page with user information

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Stack Auth JS Examples</title>
7</head>
8<body>
9  <h1>Stack Auth JS Examples</h1>
10  
11  <div id="authOptions">
12    <p>Choose an authentication example:</p>
13    <ul>
14      <li><a href="/password-sign-in">Sign in with Password</a></li>
15      <li><a href="/password-sign-up">Create Account with Password</a></li>
16      <li><a href="/otp-sign-in">Sign in with OTP Code</a></li>
17      <li><a href="/oauth">Sign in with Google</a></li>
18    </ul>
19  </div>
20
21  <div id="userInfo" style="display: none;">
22    <h2>User Information</h2>
23    <p>Email: <span id="userEmail"></span></p>
24    <button id="signOut">Sign Out</button>
25  </div>
26
27  <script type="module" src="/index-script.ts"></script>
28</body>
29</html>

Sign in with password

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Password Sign In</title>
7</head>
8<body>
9  <h1>Password Sign In</h1>
10  <p><a href="/">← Back to home</a></p>
11  
12  <div id="loginForm">
13    <h2>Sign In</h2>
14    <input type="email" id="emailInput" placeholder="Email" />
15    <input type="password" id="passwordInput" placeholder="Password" />
16    <button id="signIn">Sign In</button>
17    <div>
18      <p>Don't have an account? <a href="/password-sign-up">Create account</a></p>
19    </div>
20  </div>
21
22  <script type="module" src="/password-sign-in-script.ts"></script>
23</body>
24</html>

Sign up with password

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Password Sign Up</title>
7</head>
8<body>
9  <h1>Password Sign Up</h1>
10  <p><a href="/">← Back to home</a></p>
11  
12  <div id="signUpForm">
13    <h2>Sign Up</h2>
14    <input type="email" id="signUpEmail" placeholder="Email" />
15    <input type="password" id="signUpPassword" placeholder="Password" />
16    <button id="signUp">Sign Up</button>
17    <div>
18      <p>Already have an account? <a href="/password-sign-in">Sign in</a></p>
19    </div>
20  </div>
21
22  <script type="module" src="/password-sign-up-script.ts"></script>
23</body>
24</html> 
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>OTP Sign In</title>
7</head>
8<body>
9  <h1>OTP Sign In</h1>
10  <p><a href="/">← Back to home</a></p>
11  
12  <div id="otpForm">
13    <h2>Sign In with Email Code</h2>
14    <div id="emailStep">
15      <input type="email" id="emailInput" placeholder="Email" />
16      <button id="sendCode">Send Code</button>
17    </div>
18
19    <div id="codeStep" style="display: none;">
20      <p>Enter the code sent to your email</p>
21      <input type="text" id="codeInput" placeholder="Enter code" />
22      <button id="verifyCode">Verify Code</button>
23    </div>
24  </div>
25
26  <script type="module" src="/otp-sign-in-script.ts"></script>
27</body>
28</html>

OAuth sign in

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>OAuth Authentication</title>
7  <style>
8    .hidden {
9      display: none;
10    }
11  </style>
12</head>
13<body>
14  <h1>OAuth Authentication</h1>
15  <p><a href="/">← Back to home</a></p>
16  
17  <div id="loginButtons">
18    <h2>Sign In with OAuth</h2>
19    <button id="googleSignIn">Sign in with Google</button>
20  </div>
21
22  <script type="module" src="/oauth-script.ts"></script>
23</body>
24</html>