import { CodeExample } from '../lib/code-examples';
export const viteExamples = {
'vite-example': {
'init-app': [
{
language: 'JavaScript',
framework: 'Vanilla JavaScript',
code: `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",
},
});`,
highlightLanguage: 'typescript',
filename: 'stack/client.ts'
}
] as CodeExample[],
'index-page': [
{
language: 'JavaScript',
framework: 'Vanilla JavaScript',
variant: 'html',
code: `
Stack Auth JS Examples
Stack Auth JS Examples
Choose an authentication example:
User Information
Email:
`,
highlightLanguage: 'html',
filename: 'index.html'
},
{
language: 'JavaScript',
framework: 'Vanilla JavaScript',
variant: 'script',
code: `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);
}
});`,
highlightLanguage: 'typescript',
filename: 'index-script.ts'
}
] as CodeExample[],
'password-sign-in': [
{
language: 'JavaScript',
framework: 'Vanilla JavaScript',
variant: 'html',
code: `
Password Sign In
Password Sign In
← Back to home
`,
highlightLanguage: 'html',
filename: 'password-sign-in.html'
},
{
language: 'JavaScript',
framework: 'Vanilla JavaScript',
variant: 'script',
code: `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 = "/";
}
});`,
highlightLanguage: 'typescript',
filename: 'password-sign-in-script.ts'
}
] as CodeExample[],
'password-sign-up': [
{
language: 'JavaScript',
framework: 'Vanilla JavaScript',
variant: 'html',
code: `
Password Sign Up
Password Sign Up
← Back to home
`,
highlightLanguage: 'html',
filename: 'password-sign-up.html'
},
{
language: 'JavaScript',
framework: 'Vanilla JavaScript',
variant: 'script',
code: `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 = "/";
}
});`,
highlightLanguage: 'typescript',
filename: 'password-sign-up-script.ts'
}
] as CodeExample[],
'otp-sign-in': [
{
language: 'JavaScript',
framework: 'Vanilla JavaScript',
variant: 'html',
code: `
OTP Sign In
OTP Sign In
← Back to home
`,
highlightLanguage: 'html',
filename: 'otp-sign-in.html'
},
{
language: 'JavaScript',
framework: 'Vanilla JavaScript',
variant: 'script',
code: `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 = "/";
}
});`,
highlightLanguage: 'typescript',
filename: 'otp-sign-in-script.ts'
}
] as CodeExample[],
'oauth': [
{
language: 'JavaScript',
framework: 'Vanilla JavaScript',
variant: 'html',
code: `
OAuth Authentication
OAuth Authentication
← Back to home
Sign In with OAuth
`,
highlightLanguage: 'html',
filename: 'oauth.html'
},
{
language: 'JavaScript',
framework: 'Vanilla JavaScript',
variant: 'script',
code: `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.");
}
});`,
highlightLanguage: 'typescript',
filename: 'oauth-script.ts'
}
] as CodeExample[],
}
};