> ## Documentation Index
> Fetch the complete documentation index at: https://docs.scute.io/llms.txt
> Use this file to discover all available pages before exploring further.

# React Hooks

> Using Scute's hooks for authentication in React

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](https://github.com/scuteai/js/tree/main/examples) to see the hooks in action and check out the [type docs](https://scute-js-docs.netlify.app/) for more `scuteClient` methods.

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

```sh title="Terminal" theme={null}
npm install @scute/react-hooks
```

Add your credentials to your environment variable handler:

```sh theme={null}
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:

```js theme={null}
// 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`:

```jsx theme={null}
// 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.

```jsx theme={null}
// 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. |