About

The React package for easy-auth.

Install

npm i @easy-auth/react

yarn add @easy-auth/react

EasyAuthContextProvider

Wrap your app with EasyAuthContextProvider. Provide your API key and Google and/or Facebook app credentials so users can register and login.

import { EasyAuthContextProvider } from "@easy-auth/react";

export default function WrappedApp() {
  return (
    <EasyAuthContextProvider
      apiKey="your-api-key"
      facebookConfig={{
        appId: "your-facebook-app-id",
      }}
      firebaseConfig={{
        apiKey: "your-firebase-apiKey",
        appId: "your-firebase-appId",
        authDomain: "your-firebase-authDomain",
        projectId: "your-firebase-projectId",
      }}
    >
      <App />
    </EasyAuthContextProvider>
  );
}

Login and registration

If you'd like to use our bootstrapped components:

import { LoginPanel } from "@easy-auth/react";

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

Alternatively, with useUserFlow:

import { Provider, useUserFlow } from "@easy-auth/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 */,
    handleFacebookLogin /** calls the login API after Facebook authentication */,
    handleGoogleLogin /** calls the login API after Google 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 Easy-Auth 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={Boolean(loginProvider) || !facebookSdkReady}
          >
            Login with Facebook
          </Button>
        </div>
      )}
    </main>
  );
}

Access user information

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

import { useEasyAuthContext } from "@easy-auth/react";

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

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

The user object will have the following shape:

interface EasyAuthUser {
  id: string;
  provider: "Google" | "Facebook";
  providerId: string;
  domain: string;
  username: string;
  createdAt: number; // unix epoch time
  contents: Record<string, any>;
}

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 provider, domain, & provider-id), the users marked-for-deletion will be un-marked.

import { useEasyAuthContext } from "@easy-auth/react";

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

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