React

Quickstart

References

`<CakeAuthProvider />`

Component CakeAuthProvider is required to integrate CakeAuth in a React platform. This provider provides contexts and data that being used by various hooks and/or components.

Usage

main.tsx

import { CakeAuthProvider } from "@cakeauth/react"; 
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";
 
createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <CakeAuthProvider

      config={{

        publicKey: import.meta.env.VITE_CAKEAUTH_PUBLIC_KEY!, 
      }} 

    >
      <App />

    </CakeAuthProvider>
  </StrictMode>,
);

Properties

Prop	Type	Default
`children`	`React.ReactNode`	-
`config.publicKey`	`string`	-
`config.url`	`string?`	`Decoded from the public key`
`config.pages.signin`	`string?`	`/`
`config.pages.signup`	`string?`	`/?flow=signup`
`config.pages.passwordReset`	`string?`	`/?flow=password_reset`

Component SignIn is rendering a page of signin screen.

Usage

import { SignIn } from "@cakeauth/react";
 
const Home = () => {
  return <SignIn />;
};
 
export default Home;

Properties

Prop	Type	Default

`<SignInCard />`

Component SignInCard is rendering a sign in card component (not a whole page like <SignIn />)

Usage

import { SignInCard } from "@cakeauth/react"; 
 
const Home = () => {
  return (
    <main>
      {/* Other custom components */}

      <SignInCard />
    </main>
  );
};
 
export default Home;

Properties

Prop	Type	Default

Component SignUp is rendering a page of signup screen.

Usage

import { SignUp } from "@cakeauth/react";
 
const Home = () => {
  return <SignUp />;
};
 
export default Home;

Properties

Prop	Type	Default

`<SignUpCard />`

Component SignUpCard is rendering a sign up card component (not a whole page like <SignUp />)

Usage

import { SignUpCard } from "@cakeauth/react"; 
 
const Home = () => {
  return (
    <main>
      {/* Other custom components */}

      <SignUpCard />
    </main>
  );
};
 
export default Home;

Properties

Prop	Type	Default

`<PasswordReset />`

Component PasswordReset is rendering a page of password reset flow.

Usage

import { PasswordReset } from "@cakeauth/react";
 
const Home = () => {
  return <PasswordReset />;
};
 
export default Home;

Properties

Prop	Type	Default

`<PasswordResetCard />`

Component PasswordResetCard is rendering a sign up card component (not a whole page like <PasswordReset />).

This component has two main logic:

Forms to create a new password reset attempt
Forms to input new password (if the valid password reset query is available)

Usage

import { PasswordResetCard } from "@cakeauth/react"; 
 
const Home = () => {
  return (
    <main>
      {/* Other custom components */}

      <PasswordResetCard />
    </main>
  );
};
 
export default Home;

Properties

Prop	Type	Default

`<Captcha />`

The Captcha component, requires the bot protection settings to be configured. Under the hood, it uses:

react-turnstile: for Cloudflare Turnstile support
react-google-recaptcha: for Google reCAPTCHA support

Usage

import { Captcha } from "@cakeauth/react"; 
 
const Home = () => {
  return (
    <main>
      {/* Other custom components */}

      <Captcha type="turnstile" siteKey="xxx" />
    </main>
  );
};
 
export default Home;

Properties

Prop	Type	Default
`type`	`turnstile \| recaptcha \| null \| undefined`	-
`siteKey`	`string`	-
`onVerify()`	`(token: string) => void`	-

`<SignedIn />`

The SignedIn component is a wrapper component that will only renders the children if there's a User with an active Session signed in your application.

Usage

import { SignedIn } from "@cakeauth/react";
 
const Home = () => {
  return <SignedIn>{/* Your protected components */}</SignedIn>;
};
 
export default Home;

Properties

Prop	Type	Default
`children`	`React.ReactNode`	-

`<SignedOut />`

The SignedOut component is a wrapper component that will only renders the children if there's no User with an active Session signed in your application.

Usage

import { SignedOut } from "@cakeauth/react";
 
const Home = () => {
  return <SignedOut>{/* Your public components */}</SignedOut>;
};
 
export default Home;

Properties

Prop	Type	Default
`children`	`React.ReactNode`	-

`<UserButton />`

The UserButton component renders a button which on click displays a dropdown of common quick actions that current users can do. Such as:

Manage Account (which renders the <UserDialog />)
Signin out

Usage

import { UserButton } from "@cakeauth/react";
 
const Home = () => {
  return <UserButton />;
};
 
export default Home;

Properties

Prop	Type	Default
`align`	`center \| end \| start \| undefined`	`center`
`className`	`string`	-

`<UserDialog />`

The UserDialog component renders a featured users management dialog that allows users to manage their account and sessions.

Currently, users can:

See their details
Reset password (if current identifier is_password_enabled=true)
List their active sessions and revoke a session
Signing out (revoking current session)

Usage

import { UserDialog } from "@cakeauth/react";
 
const Home = () => {
  return <UserDialog />;
};
 
export default Home;

Properties

Prop	Type	Default
`open`	`boolean`	-
`onOpenChange()`	`(open: boolean) => void`	-

`<CakeAuthLoaded />`

The CakeAuthLoaded component is a wrapper component that will only renders the children when the CakeAuth data has loaded.

Usage

import { CakeAuthLoaded } from "@cakeauth/react";
 
const Home = () => {
  return <CakeAuthLoaded>{/* Your after load components */}</CakeAuthLoaded>;
};
 
export default Home;

Properties

Prop	Type	Default
`children`	`React.ReactNode`	-

`<CakeAuthLoading />`

The CakeAuthLoading component is a wrapper component that will only renders the children when the CakeAuth data is still loading.

Usage

import { CakeAuthLoading } from "@cakeauth/react";
 
const Home = () => {
  return <CakeAuthLoading>{/* Your loading components */}</CakeAuthLoading>;
};
 
export default Home;

Properties

Prop	Type	Default
`children`	`React.ReactNode`	-

`createRouteMatcher`

A utility function for creating route matchers to handle matching your pathname.

Usage

import { createRouteMatcher } from "@cakeauth/react";
 
const isProtectedRoute = createRouteMatcher(["/dashboard(.*)", "/forum(.*)"]);
const isPublicRoute = createRouteMatcher(["/signin(.*)", "/signup(.*)"]);
 
isPublicRoute(window.location.pathname); // => true or false

Properties

Prop	Type	Default
`patterns`	`string[]`	-

Returns

Prop	Type	Default
`(path: string) => boolean`	`(path: string) => boolean`	-

`getOAuthUrl`

Function to generate OAuth URLs for various providers. Returns a URL string or null if required parameters are missing.

Usage

import { getOAuthUrl } from "@cakeauth/react";
 
const oauthUrl = getOAuthUrl({
  provider: "github",
  clientId: "xxxx",
  redirectUri: "https://example.com/v1/callback",
  scopes: ["user", "email"],
  publicKey: "pub_test_xxx",
});

Properties

Prop	Type	Default
`provider`	`github \| google`	-
`clientId`	`string \| null \| undefined`	-
`redirectUri`	`string \| null \| undefined`	-
`scopes`	`string[]`	-
`publicKey`	`string`	-

import { CakeAuth } from "@cakeauth/frontend"
import { useHandshakeExchange } from "@cakeauth/react";
 
const cakeauth = new CakeAuth({
  publicKey: "pub_test_xxx"
})
 
const Home = () => {
  const { state, error } = useHandshakeExchange({ cakeauth });
 
  return (
    // ...
  )
};
 
export default Home;

Properties

Prop	Type	Default
`cakeauth`	`CakeAuth`	-

Returns

Prop	Type	Default
`state`	`State`	-
`error`	`CakeAuthErrorResponse \| null`	-

`useRefreshAccessToken`

Hook for refreshing the access token. Can only being invoked if a valid user sessions is present. Read more about CakAuth token refresh mechanism and process here.

Usage

import { CakeAuth } from "@cakeauth/frontend"
import { useRefreshAccessToken } from "@cakeauth/react";
 
const cakeauth = new CakeAuth({
  publicKey: "pub_test_xxx"
})
 
const Home = () => {
  const { state, error } = useRefreshAccessToken({ cakeauth });
 
  return (
    // ...
  )
};
 
export default Home;

Properties

Prop	Type	Default
`cakeauth`	`CakeAuth`	-

Returns

Prop	Type	Default
`state`	`State`	-
`error`	`CakeAuthErrorResponse \| null`	-

`useSession`

React hook that provides authentication session state and data.

Usage

import { useSession } from "@cakeauth/react";
 
const Home = () => {
  const { isAuthenticated, state, error, value } = useSession();
 
  return (
    // ...
  )
}
 
export default Home;

Returns

Prop	Type	Default
`isAuthenticated`	`boolean`	-
`state`	`State`	-
`error`	`Error \| null`	-
`value.sessionId`	`string`	-
`value.userId`	`string`	-
`value.accessToken`	`string`	-

`useSettings`

Hook for getting current environment settings details.

Usage

import { useSettings } from "@cakeauth/react";
 
const { value, state, error } = useSettings();

Types

GetSettingsResponse

Returns

Prop	Type	Default
`value`	`GetSettingsResponse \| null`	-
`state`	`State`	-
`error`	`CakeAuthErrorResponse \| null`	-

`useSignout`

Hook for handling user sign out.

Usage

import { useSignout } from "@cakeauth/react";
 
const Home = () => {
  const { signout, state, error } = useSignout();
 
  return (
    // ...
  )
}
 
export default Home;

Returns

Prop	Type	Default
`state`	`State`	-
`error`	`CakeAuthErrorResponse \| null`	-
`signout()`	`() => Promise<void>`	-

`useUser`

Hook for accessing the current user data.

Usage

import { useUser } from "@cakeauth/react";
 
const Home = () => {
  const { value, state, error } = useUser();
 
  return (
    // ...
  )
}
 
export default Home;

Types

GetMeResponseItem

Returns

Prop	Type	Default
`state`	`State`	-
`error`	`CakeAuthErrorResponse \| null`	-
`value`	`GetMeResponseItem \| null`	-

I'll create documentation for both OAuth URL generator functions.

`getGithubOAuthUrl`

Function to generate GitHub OAuth URLs with required state parameters.

Usage

import { getGithubOAuthUrl } from "@cakeauth/react";
 
const url = getGithubOAuthUrl({
  clientId: "xxxx",
  redirectUri: "https://example.com/v1/callback",
  scope: ["user", "email"],
  config: {
    origin: "https://myapp.com",
    csrf_token: "random_token",
    provider: "github",
    public_key: "pub_test_xxx",
  },
});

Properties

Prop	Type	Default
`clientId`	`string`	-
`redirectUri`	`string`	-
`scope`	`string[]`	-
`config.origin`	`string`	-
`config.csrf_token`	`string`	-
`config.provider`	`"github"`	-
`config.user_agent`	`string`	-
`config.public_key`	`string`	-

import { getGoogleOAuthUrl } from "@cakeauth/react";
 
const url = getGoogleOAuthUrl({
  clientId: "xxx",
  redirectUri: "https://example.com/v1/callback",
  scope: ["profile", "email"],
  access_type: "offline",
  config: {
    origin: "https://myapp.com",
    csrf_token: "random_token",
    provider: "google",
    public_key: "pub_test_xxx",
  },
});

Properties

Prop	Type	Default
`clientId`	`string`	-
`redirectUri`	`string`	-
`scope`	`string[]`	-
`config.origin`	`string`	-
`config.csrf_token`	`string`	-
`config.provider`	`"github"`	-
`config.user_agent`	`string`	-
`config.public_key`	`string`	-

Returns

string - The generated Google OAuth URL

On this page