--- title: 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](https://github.com/stack-auth/stack-auth/tree/main/examples/js-example). ### Initialize the app ```typescript title="stack.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 index.html index-script.ts ```html Stack Auth JS Examples

Stack Auth JS Examples

``` ```typescript import { stackClientApp } from "./stack"; 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 password-sign-in.html password-sign-in-script.ts ```html Password Sign In

Password Sign In

← Back to home

Sign In

Don't have an account? Create account

``` ```typescript import { stackClientApp } from "./stack"; // 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 password-sign-up.html password-sign-up-script.ts ```html Password Sign Up

Password Sign Up

← Back to home

Sign Up

Already have an account? Sign in

``` ```typescript import { stackClientApp } from "./stack"; // 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 otp-sign-in.html otp-sign-in-script.ts ```html OTP Sign In

OTP Sign In

← Back to home

Sign In with Email Code

``` ```typescript import { stackClientApp } from "./stack"; // 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 = "/"; } }); ``` ### OAuth sign in oauth.html oauth-script.ts ```html OAuth Authentication

OAuth Authentication

← Back to home

Sign In with OAuth

``` ```typescript import { stackClientApp } from "./stack"; // 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."); } }); ```