Paninian User Auth

Paninian User Auth is just wrapper around Auth0's react sdk for user authentication and autherization with two extra react components for Login and Logout functionality

Installation

npm i paninian-user-auth

Usage

Import

userAuth object contains all the utilities related to this package

import { userAuth } from "paninian-user-auth";

const { AuthProvider, LoginButton, LogoutButton, useAuth } = userAuth

AuthProvider

Its a react context component that holds the auth state of application and application needs to be wrapped with this provider to use any other utilities.

ReactDOM.render(
  <AuthProvider
    domain={your_Auth0_domain}
    clientId={your_Auth0_clientId}
    redirectUri={window.location.origin}
  >
    <App />
  </AuthProvider>,
  document.getElementById("root")
);

LoginButton

Its a react button component that redirects to login and sign up page and comes with some basic styling using material UI

It takes two props bgColor and sx. bgColor can be used for changing background color of button and accepts color string as a value and sx can be used to customize more styling and it needs object as a value

<LoginButton
    bgColor="red"
    sx={{
        fontSize: "12px",
        color: "yellow"
    }}
>

LogoutButton

Its a react button component that logs user out and comes with some basic styling using material UI

It takes two props bgColor and sx. bgColor can be used for changing background color of button and accepts color string as a value and sx can be used to customize more styling and it needs object as a value

<LoginButton
    bgColor="red"
    sx={{
        fontSize: "12px",
        color: "yellow"
    }}
>

useAuth

Its a custom hooks that returns some useful auth functions and state.

const {
  // Auth state:
  error,
  isAuthenticated,
  isLoading,
  user,
  // Auth methods:
  getAccessTokenSilently,
  getAccessTokenWithPopup,
  getIdTokenClaims,
  loginWithRedirect,
  loginWithPopup,
  logout,
} = useAuth();