React SPA — first integration - Authaz

React SPA — first integration - Authaz - Docs

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
 
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api/auth": "http://localhost:3000",
    },
  },
});

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import { AuthazProvider } from "@authaz/react";
import App from "./App";
import Dashboard from "./Dashboard";
import Callback from "./Callback";
 
ReactDOM.createRoot(document.getElementById("root")!).render(
  <AuthazProvider basePath="/api/auth">
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/auth/callback" element={<Callback />} />
      </Routes>
    </BrowserRouter>
  </AuthazProvider>
);

import { useEffect } from "react";
import { useSearchParams } from "react-router-dom";
 
export default function Callback() {
  const [params] = useSearchParams();
  useEffect(() => {
    const form = document.createElement("form");
    form.method = "POST";
    form.action = "/api/auth/callback";
    for (const k of ["code", "state", "error", "error_description"]) {
      const v = params.get(k);
      if (v) {
        const i = document.createElement("input");
        i.type = "hidden"; i.name = k; i.value = v;
        form.appendChild(i);
      }
    }
    document.body.appendChild(form);
    form.submit();
  }, [params]);
  return <p>Completing sign-in…</p>;
}

import { useUser, useIsAuthenticated, SignInButton, SignOutButton } from "@authaz/react";
import { Link } from "react-router-dom";
 
export default function App() {
  const user = useUser();
  const isAuthed = useIsAuthenticated();
 
  return (
    <main>
      <h1>Welcome</h1>
      {isAuthed ? (
        <>
          <p>Signed in as {user?.email}</p>
          <Link to="/dashboard">Dashboard</Link>
          <SignOutButton />
        </>
      ) : (
        <SignInButton />
      )}
    </main>
  );
}

import { useRequireUser } from "@authaz/react";
 
export default function Dashboard() {
  const user = useRequireUser({ redirectTo: "/" });
  if (!user) return null; // redirect in flight
  return (
    <main>
      <h1>Dashboard</h1>
      <p>Hello, {user.email} (id: <code>{user.id}</code>)</p>
    </main>
  );
}

React SPA — first integration

1. What you'll build#

2. Application setup#

3. Install#

4. Configure#

5. Wire it up#

6. Read the user#

7. Protect a route#

8. Common gotchas#

9. Next steps#