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.

Getting Started

Quickstarts

More Quickstarts

Authentication

Verification

Verification Details

Workspaces

Platform

More

Initialize the Scute client

Wrap your React app with Scute AuthContextProvider

Using the hooks

`useAuth`

`useScuteClient`

​Initialize the Scute client

​Wrap your React app with Scute AuthContextProvider

​Using the hooks

​useAuth

​useScuteClient

Initialize the Scute client

Wrap your React app with Scute AuthContextProvider

Using the hooks

`useAuth`

`useScuteClient`