Secure Authentication

Healthblocks Authentication is based on a rotating JWT token.

Prerequisites

• Configure an authenticator in the admin dashboard. When using a project level authenticator, you must wrap the auth provider inside a project provider.

Example

First wrap your app in <AuthProvider> (inside <ProjectProvider>).

import { ProjectProvider } from '@healthblocks-io/core/project'
import { AuthProvider } from '@healthblocks-io/core/auth'

const App = () => {
  return (
    <ProjectProvider pid="example">
      <AuthProvider>
        <Screens />
      </AuthProvider>
    </ProjectProvider>
  )
}

Now only show the sign in screen when the user is not logged in yet.

import { useAuth, useUser } from '@healthblocks-io/core/auth'

const Screens = () => {
  const auth = useAuthState()
  if (!auth) {
    return <SignInScreen />
  }
  return <div>Logged in with user id {user.sub}</div>
}

const SignInScreen = () => {
  const { signInWithEmailAndPassword, createUserWithEmailAndPassword } =
    useAuthActions()
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  return (
    <div>
      <input placeholder="email" onChange={evt => setEmail(evt.target.value)} />
      <input
        placeholder="password"
        onChange={evt => setPassword(evt.target.value)}
      />
      <button onClick={() => signInWithEmailAndPassword(email, password)}>
        Sign in
      </button>
      <button onClick={() => createUserWithEmailAndPassword(email, password)}>
        Register
      </button>
    </div>
  )
}

Available hooks

useAuthState returns the current auth state.

• access_token is the token that fits in a header like Authorization: Bearer <access_token>.
• refresh_token is used to get a new access token.

useAuthActions returns useful sign in methods.

• signInWithEmailAndPassword(email, password) is a way to sign in using Auth0 email/password.
• createUserWithEmailAndPassword(email, password) is a way to create an account using email/password.
• sendPasswordResetEmail({ email, redirectUri }) sends a password reset email. Make sure to whitelist the URL beforehand in the admin dashboard!
• resetPassword({ key, password }) sets a new password based on the token from a password reset email.

useAuth returns a snapshot of the auth state and the auth context methods.

• data has the current auth state.
• next() returns a valid access token (refreshed if needed, deduplicated).
• setData(data, persist) updates the auth state and optionally saves it to storage.
• signOut() forgets the auth tokens.

useAuthContext returns the complete auth context, handy if you want to access the current auth state without rerendering.

• data.current has the current auth state.
• next() returns a valid access token (refreshed if needed, deduplicated).
• setData(data, persist) updates the auth state and optionally saves it to storage.
• signOut() forgets the auth tokens.

useUser returns the decoded access_token of the currently logged in user.

• sub is a unique combination of userId and projectId.
• userId is original userId.
• projectId is null for server admins and a specific projectId for project level users like patients.
• authenticatorId refers to the authenticator that was used to sign in.