@jasminauth/react v1.0.13

The React package for JasminAuth

Install

npm i @jasminauth/react

yarn add @jasminauth/react

JasminAuthContextProvider

Wrap your app with JasminAuthContextProvider. Provide your API key and authorization-provider credentials so users can register and login.

import { JasminAuthContextProvider } from "@jasminauth/react";

export default function WrappedApp() {
  return (
    <JasminAuthContextProvider
      apiKey="your-api-key"
      firebaseConfig={{
        apiKey: "your-firebase-apiKey",
        appId: "your-firebase-appId",
        authDomain: "your-firebase-authDomain",
        projectId: "your-firebase-projectId",
      }}
      facebookConfig={{
        appId: "your-facebook-app-id",
      }}
      linkedinConfig={{
        clientId: "your-linkedin-clientId",
        redirectUrl: "your-login-redirect-url",
      }}
      githubConfig={{
        clientId: "your-github-clientId",
        redirectUrl: "your-login-redirect-url",
      }}
      expiry={86_400} // validity of the user-token in seconds
      requireUserToken // Whether the user-token is required on client-side. If false (default), the user-token will be set as a http-only cookie
    >
      <App />
    </JasminAuthContextProvider>
  );
}

Login and registration

If you'd like to use our bootstrapped components:

import { LoginPanel } from "@jasminauth/react";

export default function LoginPage() {
  return <LoginPanel />;
}

Alternatively, with useUserFlow:

import { Provider, useUserFlow } from "@jasminauth/react";
import { Button, Input } from "your-library";

export default function Login() {
  const {
    // login controls
    facebookSdkReady, // if the Facebook sdk is downloaded and has been initiated
    loginProvider, // the authentication-provider currently being used to login
    handleGoogleLogin, // calls the login API after Google authentication
    handleFacebookLogin, // ~ after Facebook authentication
    handleLinkedinLogin, // ~ after LinkedIn authentication
    handleGithubLogin, // ~ after GitHub authentication

    // registration controls
    isRegistering // if there is an ongoing request to the register API,
    registrationInfo, // username to be used in the current registration process
    newUsername, // username to be used in the registration process
    setNewUsername, // set the new username in the registration process
    handleRegister, // calls register API with registrationInfo and newUsername
    cancelRegistration, // cancels the current registration process
  } = useUserFlow();

  // Logging in with any provider will trigger the registration flow (set registrationInfo) if there is no existing JasminAuth user

  return (
    <main>
      {registrationInfo ? (
        <div>
          <h3>Register</h3>
          <Input value={newUsername} onChange={setNewUsername} />
          <Button onClick={handleRegister} disabled={isRegistering}>
            Register
          </Button>
          <Button onClick={cancelRegistration} disabled={isRegistering}>
            Cancel
          </Button>
        </div>
      ) : (
        <div>
          <h3>Login</h3>
          <Button
            onClick={handleGoogleLogin}
            loading={loginProvider === Provider.GOOGLE}
            disabled={Boolean(loginProvider)}
          >
            Login with Google
          </Button>
          <Button
            onClick={handleFacebookLogin}
            loading={loginProvider === Provider.FACEBOOK}
            disabled={!facebookSdkReady || Boolean(loginProvider)}
          >
            Login with Facebook
          </Button>
          <Button
            onClick={handleLinkedinLogin}
            loading={loginProvider === Provider.LINKEDIN}
            disabled={Boolean(loginProvider)}
          >
            Login with LinkedIn
          </Button>
          <Button
            onClick={handleGithubLogin}
            loading={loginProvider === Provider.GITHUB}
            disabled={Boolean(loginProvider)}
          >
            Login with GitHub
          </Button>
        </div>
      )}
    </main>
  );
}

Additional user information

Save, update and delete additional user information with setUserInfo, updateUserInfo and deleteUserInfo:

import { useJasminAuth } from "@jasminauth/react";

export default function App() {
  const { user, updateUserInfo, deleteUserInfo } = useJasminAuth();

  return (
    <main>
      <h3>{user.additionalInfo?.name}</h3>
      <button onClick={() => updateUserInfo({ name: "John Doe" })}>
        Change name
      </button>
      <button onClick={() => deleteUserInfo()}>Clear additional info</button>
    </main>
  );
}

Access user information

In the rest of your app, access user information and logout as such:

import { useJasminAuth } from "@jasminauth/react";

export default function App() {
  const { user, logout } = useJasminAuth();

  return (
    <main>
      <h3>Logged in as {user.username}</h3>
      <button onClick={logout}>Logout</button>
    </main>
  );
}

The user object will have the following shape:

interface JasminAuthUser {
  id: string;
  provider: "Facebook" | "GitHub" | "Google" | "LinkedIn";
  providerId: string;
  providerInfo: Record<string, any>; // information from the provider
  domain: string;
  username: string;
  createdAt: number; // unix epoch time
  updatedAt: number; // unix epoch time - when providerInfo was last updated
  additionalInfo: Record<string, any> | null; // additional user information set by you
}

Access user information (server side)

Set requireUserToken=true in JasminAuthContextProvider. Then, from your React client, send user information to your server by including the user-token in your request headers as such:

import { getJasUserHeader } from "@jasminauth/react";

const requestHeaders = { ...otherHeaders, ...getJasUserHeader() };

This adds to your request a header jas-user-token. Note that in the case of cross-origin requests, you might have to add this as an allowed header on your server-side:

"Access-Control-Allow-Headers": "jas-user-token"

On your server-side, you have several options to retrieve user information from the user-token:

• Js middlewares package

• Go package

• APIs

Deregister user

When users deregister, they are for marked deletion without immediately being deleted. After a grace-period of 30 days, their information will be deleted. By logging in again (same domain, provider, and provider-id), users marked for deletion will be un-marked.

import { useJasminAuth } from "@jasminauth/react";

export default function DeregisterButton() {
  const { deregister } = useJasminAuth();

  return <button onClick={deregister}>Deregister</button>;
}