PropelAuth home pagelight logo
  1. Getting Started
  2. Usage

​
Installation

To get started, you’ll first need to install the component library branch of @PropelAuth/react library. You’ll also need a set of underlying elements for the component library to use. This could be our official Base Elements or an Adapter Library like MUI (coming soon).

npm install @propelauth/react@2.1.0-beta.2 @propelauth/base-elements

​
Usage

Once installation is complete, you’ll need to wrap your application with the BetaComponentLibraryProvider. Be sure to pass in the elements you’d like to use with the elements prop. You can also specify an appearance prop in the provider to apply customizations to elements globally.

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { AuthProvider, BetaComponentLibraryProvider } from "@propelauth/react";
import { BaseElements } from "@propelauth/base-elements";
import "@propelauth/base-elements/dist/default.css"

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <AuthProvider authUrl={process.env.REACT_APP_AUTH_URL}>
    <BetaComponentLibraryProvider elements={BaseElements}>
      <App />
    </BetaComponentLibraryProvider>
  </AuthProvider>
);

Then, in our App component, we can use the LoginManager component to handle the login process and direct users to the dashboard after they log in.

import * as React from "react";
import { LoginManager } from "@propelauth/react";

export default function App() {
  const redirectToYourProduct = () => {
    // This is dependent on your framework
    // For Next.js, you'll want router.push("/example")
    // for React Router, it's navigate("/example")
  };

  return (
    <div>
      <LoginManager onLoginCompleted={redirectToYourProduct} />
    </div>
  );
}