Getting Started

Installation & Setup

Getting started with Stack in 5 minutes

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.

1

Install npm package

Terminal
$npm install @stackframe/react
2

Create API keys

If 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:

3

Create stack.ts file

Create a new file stack.ts in your root directory and fill it with the following Stack app initialization code:

stack.ts
1import { StackClientApp } from "@stackframe/react";
2import { useNavigate } from "react-router-dom";
3
4export const stackClientApp = new StackClientApp({
5  // You should store these in environment variables based on your project setup
6  projectId: "your-project-id",
7  publishableClientKey: "your-publishable-client-key",
8  tokenStore: "cookie",
9  redirectMethod: {
10    useNavigate,
11  }
12});
4

Update App.tsx

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.

App.tsx
1import { StackHandler, StackProvider, StackTheme } from "@stackframe/react";
2import { Suspense } from "react";
3import { BrowserRouter, Route, Routes, useLocation } from "react-router-dom";
4import { stackClientApp } from "./stack";
5
6function HandlerRoutes() {
7  const location = useLocation();
8  
9  return (
10    <StackHandler app={stackClientApp} location={location.pathname} fullPage />
11  );
12}
13
14export default function App() {
15  return (
16    <Suspense fallback={null}>
17      <BrowserRouter>
18        <StackProvider app={stackClientApp}>
19          <StackTheme>
20            <Routes>
21              <Route path="/handler/*" element={<HandlerRoutes />} />
22              <Route path="/" element={<div>hello world</div>} />
23            </Routes>
24          </StackTheme>
25        </StackProvider>
26      </BrowserRouter>
27    </Suspense>
28  );
29}
5

Done!

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.

SignIn

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:

Stack account settings page