React Hooks

For a more granular control over your authentication flow, you can use the @scute/react-hooks package. This package exposes the useAuth and useScuteClient hooks, which allow you to build your own custom UI while still leveraging Scute's authentication logic.

Head over to the example projects repo to see the hooks in action and check out the type docs for more scuteClient methods.

To get started, install our React SDK with your favorite package manager:

Terminal

npm install @scute/react-hooks

Add your credentials to your environment variable handler:

VITE_SCUTE_APP_ID="YOUR_SCUTE_PROJECT_ID"
VITE_SCUTE_BASE_URL="YOUR_SCUTE_BASE_URL"

NOTE: If you are not using Vite, use "REACT_APP" as your prefix for your environment variables.

Initialize the Scute client

First initialize the Scute client using the createClient method exposed by @scute/react-hooks package:

// scute.js

import { createClient } from "@scute/react-hooks";

export const scute = createClient({
  appId: import.meta.env.VITE_SCUTE_APP_ID,
  baseUrl: import.meta.env.VITE_SCUTE_BASE_URL,
});

Wrap your React app with Scute AuthContextProvider

To be able to use the useScuteClient and useAuth hooks, wrap your app inside the Scute AuthContextProvider:

// App.jsx

import { AuthContextProvider } from "@scute/react-hooks";
import { scute } from "./scute";

export default function App() {
  return (
    <AuthContextProvider scuteClient={scute}>
      {/* This is where the rest of your application lives */}
    </AuthContextProvider>
  );
}

Using the hooks

Now you can use the useAuth and useScuteClient hooks in your components.

// MyComponent.jsx

import { useAuth, useScuteClient } from "@scute/react-hooks";

export const MyComponent = () => {
  const { session, user, signOut } = useAuth();
  const scute = useScuteClient();

  if (session.status === "loading") {
    return <div>Loading...</div>;
  }

  if (session.status === "unauthenticated") {
    return (
      <div>
        <button onClick={() => scute.signInWithEmail("test@example.com")}>
          Sign In
        </button>
      </div>
    );
  }

  return (
    <div>
      <h1>Welcome, {user.email}</h1>
      <button onClick={signOut}>Sign Out</button>
    </div>
  );
};

useAuth

The useAuth hook provides access to the authentication state and the current user.

Property	Type	Description
session	Session	The current authentication session.
user	ScuteUserData or null	The currently authenticated user, or null if not authenticated.
signOut	() => Promise<void>	A function to sign the user out.

useScuteClient

The useScuteClient hook provides access to the Scute client instance.

Property	Type	Description
scute	ScuteClient	The Scute client instance.