Skip to main content
If you would like to use the pre-built Scute UI with your react app, you can do so using the @scute/ui-react package. This package would expose the pre-built Auth and Profile components which you can use to easily integrate Scute to your current app. Head over to the example project repo to clone and run this example project and check out the type docs for more scuteClient methods. To get started, install our React SDKs with your favorite package manager:
Terminal
npm install @scute/react @scute/ui-react`
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 package: 
// scute.js

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

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";
import { scute } from "./scute";

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

​
Add the Scute pre-built UI

First, create a component to show to your authenticated users: 
// AuthenticatedView.jsx
import { Profile } from "@scute/ui-react";
import { useAuth, useScuteClient } from "@scute/react";

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

  if (session.status === "loading") {
    return null;
  } else if (session.status === "unauthenticated") {
    return <>unauthenticated</>;
  }

  return <Profile scuteClient={scute} language="en" />;
};
Then, create a component to switch between the authentication form and the AuthenticatedView based on the session status: 
// ScuteUI.jsx
import { Auth } from "@scute/ui-react";
import { useScuteClient, useAuth } from "@scute/react";
import { AuthenticatedView } from "./AuthenticatedView";

export const ScuteUI = () => {
  const { session } = useAuth();
  const scute = useScuteClient();

  if (session.status === "authenticated") {
    return <AuthenticatedView />;
  }

  return (
    <Auth
      scuteClient={scute}
      language="en"
      policyURLs={{
        privacyPolicy: "https://example.com/privacy",
        termsOfService: "https://example.com/terms",
      }}
      logoUrl="https://example.com/logo.png"
    />
  );
};
Finally, modify the App.jsx to render the ScuteUI inside the AuthContextProvider: 
// App.jsx

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

export default function App() {
  return (
    <AuthContextProvider scuteClient={scute}>
      <ScuteUI />
    </AuthContextProvider>
  );
}
Congrats! You have a working Scute instance now! No session No session


With session (Profile) With session


With session (UserButton) With session


​
Component API’s

​
Auth Component

PropertyTypeDefaultDescription
scuteClientScuteClientundefinedThe Scute client instance. This property is required
onSignIn?() => voidundefinedCallback function for sign-in
webauthn?“strict” | “optional” | “disabled""optional”Options for WebAuthn
language?string”en”Language setting
appearance??undefinedAppearance settings

​
Profile Component

PropertyTypeDefaultDescription
scuteClientScuteClientundefinedThe Scute client instance
language?string”en”Language setting

​
UserButton Component

PropertyTypeDefaultDescription
scuteClientScuteClientundefinedThe Scute client instance
language?string”en”Language setting
username?stringundefinedUsername to display
profileUrl?stringundefinedProfile URL to navigate to
profilePictureUrl?stringundefinedProfile picture URL