📦 Install

npm i verifire-client-library

🔨 Usage

import { VerfireLogin, VerifireClientContext } from 'verifire-client-library'

function App() {
  let verifireOptions = {
    verifireClient: 'https://localhost.something.com:12000',
    callback: (response) => handleCredentialResponse(response),
  }

  const [credential, setCredential] = useState(null)

  const handleCredentialResponse = (credentials) => {
    if (!credentials) {
      // route to signin/signup page
    }
    setCredential(credentials)
  }

  const onLogout = () => {
    window.location.reload()
  }

  return (
    <div className="App">
      <VerifireClientContext options={verifireOptions}>
        {credential ? (
          <div style={{ wordBreak: 'break-word', padding: '4rem 4rem', maxWidth: '800px' }}>
            <span style={{ fontSize: '1.2rem', fontWeight: '500', color: 'green' }}>
              Already logged in as
            </span>{' '}
            <pre style={{ whiteSpace: 'break-spaces' }}>{JSON.stringify(credential.profile)}</pre>
          </div>
        ) : (
          <VerfireLogin
            handleCredentialResponse={handleCredentialResponse}
            style={{ height: '100vh', width: '100vw' }}
          />
        )}
      </VerifireClientContext>
    </div>
  )
}

Render profile dropdown

<div className="header">
  <div id="verifireUserDropdown">
    {credential && window.verifireClient.renderProfileDropdown({ logoutCallback: onLogout })}
  </div>
</div>

Note:

Wrap your authenticated module root around VerifireClientContext to make sure your routes are protected.