Setup
Welcome to the React SDK setup guide! If you're looking for guides for other frameworks, check out the Next.js SDK Setup, or the JavaScript SDK Setup.
Before getting started, make sure you have a React project setup. We show an example here of a Vite React project with React Router.
npm install @stackframe/reactIf you haven't already, register a new account on Stack, create a project in the dashboard, create a new API key from the left sidebar, and copy the project ID, publishable client key, and secret server key into a new file called .env.local in the root of your React project:
Create a new file stack.ts in your root directory and fill it with the following Stack app initialization code:
import { StackClientApp } from "@stackframe/react";
import { useNavigate } from "react-router-dom";
export const stackClientApp = new StackClientApp({
// You should store these in environment variables based on your project setup
projectId: "your-project-id",
publishableClientKey: "your-publishable-client-key",
tokenStore: "cookie",
redirectMethod: {
useNavigate,
}
});Update your App.tsx file to wrap the entire app with a StackProvider and StackTheme and add a StackHandler component to handle the authentication flow.
import { StackHandler, StackProvider, StackTheme } from "@stackframe/react";
import { Suspense } from "react";
import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
import { stackClientApp } from "./stack";
function HandlerRoutes() {
const location = useLocation();
return (
<StackHandler app={stackClientApp} location={location.pathname} fullPage />
);
}
export default function App() {
return (
<Suspense fallback={null}>
<BrowserRouter>
<StackProvider app={stackClientApp}>
<StackTheme>
<Routes>
<Route path="/handler/*" element={<HandlerRoutes />} />
<Route path="/" element={<div>hello world</div>} />
</Routes>
</StackTheme>
</StackProvider>
</BrowserRouter>
</Suspense>
);
}That's it! Stack is now configured in your React project. If you start your React app and navigate to http://localhost:5173/handler/sign-up, you will see the sign-up page.
After signing up/in, you will be redirected back to the home page. We will show you how to add user information to it in the next section. You can also check out the http://localhost:5173/handler/account-settings page which looks like this:
