@sandboxvr/auth-components v0.0.7

@sandboxvr/auth-components

A reusable collection of React UI components for handling auth

Install

yarn add @sandboxvr/auth-components

Usage

Firebase must be enabled before using these components:

import { initializeApp } from 'firebase/app'

initializeApp({
  apiKey,
  authDomain,
  databaseURL,
  projectId,
  storageBucket,
  messagingSenderId,
  appId
})

AuthButton

A button that waits for user status, then shows either a Login or Logout button, as needed

Usage (all props are optional):

import { AuthButton } from '@sandboxvr/auth-components'

<AuthButton
  loginClassName="login"
  loginStyle={{ color: 'red' }}
  loginLabel="Login"
  logoutClassName="logout"
  logoutStyle={{ color: 'blue' }}
  logoutLabel="Logout"
/>

Login

Provides a login button that will prompt user to sign up or login

import { Login } from '@sandboxvr/auth-components'

<Login
  {/* required */}
  onLogin={(user: firebase.User, credential: auth.AuthCredential) => { /* respond to login */}}
  {/* optional */}
  label="Login Please"
  className="login"
  style={{ color: 'yellow' }}
/>

Logout

Provides a login button that will prompt user to sign up or login

import { Logout } from '@sandboxvr/auth-components'

<Logout
  {/* required */}
  onLogout={() => { /* respond to logout */}}
  {/* optional */}
  label="Login Please"
  className="login"
  style={{ color: 'yellow' }}
/>

useToken hook

Provides a React hook to obtain an authentication token. Handles:

• Refresh
• Tokencide
• User login / logout

import { useToken } from '@sandboxvr/auth-components'


const MyComponent = () => {
 const [token, claims] = useToken()

 // render....
}

token will be a token that can be passed along to services requiring authentication

await axios.get(`${process.env.REACT_APP_API_ENDPOINT}/retail`, {
  headers: {
    Authorization: `Bearer ${token}`,
  },
})

claims is an object with the roles of the user. For example { retail: true }