--- title: Vite JavaScript Example description: How to integrate Stack Auth with Vite and other JavaScript frameworks sidebarTitle: Vite Example icon: "bolt" --- # Vite JavaScript Example 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](https://github.com/stack-auth/stack-auth/tree/main/examples/js-example). ## Initialize the app ```typescript title="stack/client.ts" import { StackClientApp } from "@stackframe/js"; // Add type declaration for Vite's import.meta.env declare global { interface ImportMeta { env: { VITE_STACK_API_URL: string; VITE_STACK_PROJECT_ID: string; VITE_STACK_PUBLISHABLE_CLIENT_KEY: string; }; } } export const stackClientApp = new StackClientApp({ baseUrl: import.meta.env.VITE_STACK_API_URL, projectId: import.meta.env.VITE_STACK_PROJECT_ID, publishableClientKey: import.meta.env.VITE_STACK_PUBLISHABLE_CLIENT_KEY, tokenStore: "cookie", urls: { oauthCallback: window.location.origin + "/oauth", }, }); ``` ## Index page with user information ```html title="index.html" Stack Auth JS Examples

Stack Auth JS Examples

Choose an authentication example:

``` ```typescript title="index-script.ts" import { stackClientApp } from "./stack/client"; const updateUIState = (user: any | null) => { const authOptions = document.getElementById("authOptions"); const userInfo = document.getElementById("userInfo"); const userEmailSpan = document.getElementById("userEmail"); if (user) { if (authOptions) authOptions.style.display = "none"; if (userInfo) userInfo.style.display = "block"; if (userEmailSpan) userEmailSpan.textContent = user.primaryEmail || ""; } else { if (authOptions) authOptions.style.display = "block"; if (userInfo) userInfo.style.display = "none"; } }; // Check if user is already signed in stackClientApp.getUser().then(updateUIState); // Handle Sign Out document.getElementById("signOut")?.addEventListener("click", async () => { const user = await stackClientApp.getUser(); if (user) { await user.signOut(); updateUIState(null); } }); ``` ## Sign in with password ```html title="password-sign-in.html" Password Sign In

Password Sign In

← Back to home

Sign In

Don't have an account? Create account

``` ```typescript title="password-sign-in-script.ts" import { stackClientApp } from "./stack/client"; // Check if user is already signed in stackClientApp.getUser().then((user) => { if (user) { window.location.href = "/"; } }); document.getElementById("showSignUp")?.addEventListener("click", (e) => { e.preventDefault(); document.getElementById("loginForm")?.classList.add("hidden"); document.getElementById("signUpForm")?.classList.remove("hidden"); }); document.getElementById("showSignIn")?.addEventListener("click", (e) => { e.preventDefault(); document.getElementById("loginForm")?.classList.remove("hidden"); document.getElementById("signUpForm")?.classList.add("hidden"); }); document.getElementById("signIn")?.addEventListener("click", async () => { const emailInput = document.getElementById("emailInput") as HTMLInputElement; const passwordInput = document.getElementById("passwordInput") as HTMLInputElement; const result = await stackClientApp.signInWithCredential({ email: emailInput.value, password: passwordInput.value, }); if (result.status === "error") { alert("Sign in failed. Please check your email and password and try again."); } else { window.location.href = "/"; } }); document.getElementById("signUp")?.addEventListener("click", async () => { const emailInput = document.getElementById("signUpEmail") as HTMLInputElement; const passwordInput = document.getElementById("signUpPassword") as HTMLInputElement; const result = await stackClientApp.signUpWithCredential({ email: emailInput.value, password: passwordInput.value, }); if (result.status === "error") { alert("Sign up failed. Please try again."); return; } const signInResult = await stackClientApp.signInWithCredential({ email: emailInput.value, password: passwordInput.value, }); if (signInResult.status === "error") { alert("Account created but sign in failed. Please sign in manually."); } else { window.location.href = "/"; } }); ``` ## Sign up with password ```html title="password-sign-up.html" Password Sign Up

Password Sign Up

← Back to home

Sign Up

Already have an account? Sign in

``` ```typescript title="password-sign-up-script.ts" import { stackClientApp } from "./stack/client"; // Check if user is already signed in stackClientApp.getUser().then((user) => { if (user) { window.location.href = "/"; } }); document.getElementById("signUp")?.addEventListener("click", async () => { const emailInput = document.getElementById("signUpEmail") as HTMLInputElement; const passwordInput = document.getElementById("signUpPassword") as HTMLInputElement; const result = await stackClientApp.signUpWithCredential({ email: emailInput.value, password: passwordInput.value, }); if (result.status === "error") { alert("Sign up failed. Please try again."); return; } const signInResult = await stackClientApp.signInWithCredential({ email: emailInput.value, password: passwordInput.value, }); if (signInResult.status === "error") { alert("Account created but sign in failed. Please sign in manually."); window.location.href = "/password-sign-in"; } else { window.location.href = "/"; } }); ``` ## Sign in with OTP/Magic Link ```html title="otp-sign-in.html" OTP Sign In

OTP Sign In

← Back to home

Sign In with Email Code

``` ```typescript title="otp-sign-in-script.ts" import { stackClientApp } from "./stack/client"; // Check if user is already signed in stackClientApp.getUser().then((user) => { if (user) { window.location.href = "/"; } }); document.getElementById("sendCode")?.addEventListener("click", async () => { const emailInput = document.getElementById("emailInput") as HTMLInputElement; await stackClientApp.sendMagicLinkEmail({ email: emailInput.value, }); document.getElementById("emailStep")!.style.display = "none"; document.getElementById("codeStep")!.style.display = "block"; }); document.getElementById("verifyCode")?.addEventListener("click", async () => { const codeInput = document.getElementById("codeInput") as HTMLInputElement; const result = await stackClientApp.signInWithMagicLink({ code: codeInput.value, }); if (result.status === "error") { alert("Verification failed. Please check the code and try again."); } else { window.location.href = "/"; } }); ``` ## OAuth sign in ```html title="oauth.html" OAuth Authentication

OAuth Authentication

← Back to home

Sign In with OAuth

``` ```typescript title="oauth-script.ts" import { stackClientApp } from "./stack/client"; // Check if user is already signed in stackClientApp.getUser().then((user) => { if (user) { window.location.href = "/"; } }); // Handle Google Sign In document.getElementById("googleSignIn")?.addEventListener("click", async () => { try { await stackClientApp.signInWithOAuth('google'); } catch (error) { console.error("Google sign in failed:", error); alert("Failed to initialize Google sign in"); } }); // Handle OAuth redirect window.addEventListener("load", async () => { try { const params = new URLSearchParams(window.location.search); const code = params.get("code"); const state = params.get("state"); if (code && state) { const user = await stackClientApp.callOAuthCallback(); if (user) { window.location.href = "/"; } } } catch (error) { console.error("Failed to handle OAuth redirect:", error); alert("Authentication failed. Please try again."); } }); ```