Vanilla JavaScript Client

Vanilla JavaScript client library

Stack Auth provides a vanilla JavaScript/TypeScript client library that works with any JavaScript framework in both frontend and backend environments.

Key differences between the JavaScript and Next.js client libraries:

  • No built-in UI components or default pages - you’ll need to implement your own UI and callback handlers
  • No React hooks functionality (useUser(), useStackApp(), etc.)

Installation

$npm install @stackframe/js

Backend

Initialization

1import { StackServerApp } from "@stackframe/js";
2
3const stackServerApp = new StackServerApp({
4  projectId: "your-project-id-from-dashboard",
5  publishableClientKey: "your-publishable-client-key-from-dashboard",
6  secretServerKey: "your-secret-server-key-from-dashboard",
7  tokenStore: "memory",
8});

Example usage

1const user = await stackServerApp.getUser("user_id");
2
3await user.update({
4  displayName: "New Display Name",
5});
6
7const team = await stackServerApp.createTeam({
8  name: "New Team",
9});
10
11await team.addUser(user.id);

Check out the SDK reference for more details and examples.

Frontend

Initialization

1import { StackClientApp } from "@stackframe/js";
2
3const stackClientApp = new StackClientApp({
4  projectId: "your-project-id-from-dashboard",
5  publishableClientKey: "your-publishable-client-key-from-dashboard",
6  tokenStore: "cookie",
7});

Example usage

1await stackClientApp.signInWithCredential({
2  email: "test@example.com",
3  password: "password123",
4});
5
6const user = await stackClientApp.getUser();
7
8await user.update({
9  displayName: "New Display Name",
10});
11
12await user.signOut();

Check out the SDK reference for more details and examples.

HTML + JS + Vite Example

Here is how to use Stack Auth with Vite, other frameworks work with the same principle. The full example code is available here.

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>
Built with