React

Before continuing

Make sure you have:

Setup your account
React app with Vite configured

Install the package

npm install @cakeauth/react

Setup environment variables

In your .env file (create one if it doesn't exist), add the following:

VITE_CAKEAUTH_PUBLIC_KEY="pub_test_xxx"

VITE_CAKEAUTH_PUBLIC_KEY: your public key

Don't know where to get those? Check out this quick cheat sheet.

Add ready-to-use components

Add CakeAuth middleware to your Next.js app:

Add CakeAuthProvider to your main file

src/main.tsx

import { CakeAuthProvider } from "@cakeauth/react"; 
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";
 
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <CakeAuthProvider

      config={{

        publicKey: import.meta.env.VITE_CAKEAUTH_PUBLIC_KEY!, 
      }} 

    >
      <App />

    </CakeAuthProvider>
  </StrictMode>,
);

Add authentication components to your app

src/App.tsx

import {
  PasswordReset,
  SignedIn,
  SignedOut,
  SignIn,
  SignUp,
  UserButton,
} from "@cakeauth/react";
 
const Home = () => {
  return (
    <>
      <SignedOut>
        <SignIn />
        <SignUp />
        <PasswordReset />
      </SignedOut>
      <SignedIn>
        <UserButton />
      </SignedIn>
    </>
  );
};
 
export default Home;

Let's run it 🚀

npm run dev

Open your browser at http://localhost:5173 and you should be able to signup!

What's next?

TODO:

Adding more auth options
protect pages/components
protect API routes
session management
more on sdk reference