Client Auth

import Portal from '@portal-hq/web'

export const portal = new Portal({
  host: 'YOUR-CUSTOM-SUBDOMAIN',
  clientAuth: {
    authEnvironmentId: 'YOUR_AUTH_ENVIRONMENT_ID',
    redirectUrl: 'https://example.com/auth/callback',
    // Required only by sendMagicLink()
    magicLink: {
      fromEmail: 'hello@auth.example.com',
      templateId: 'YOUR_TEMPLATE_ID',
    },
    // Optional: whether the client Portal creates uses gas sponsorship
    // isAccountAbstracted: true,
  },
})

import { createContext, useCallback, useContext, useEffect, useState } from 'react'
import type { FC, PropsWithChildren } from 'react'

import type { SessionIdentity } from '@portal-hq/web'

import { portal } from './portal'

const SignedInUser = createContext<{
  endUserId: string | null
  adopt: (identity: SessionIdentity) => void
}>({ endUserId: null, adopt: () => undefined })

export const useSignedInUser = () => useContext(SignedInUser)

/**
 * Mount once, above your routes: `onSessionInvalidated` is not replayed, so a
 * listener inside a route that is unmounted when the session ends never hears
 * about it.
 */
export const SignedInUserProvider: FC<PropsWithChildren> = ({ children }) => {
  const [endUserId, setEndUserId] = useState<string | null>(null)

  // Call this with the result of handleRedirect() or restoreSession().
  const adopt = useCallback((identity: SessionIdentity) => {
    setEndUserId(identity.endUserId)
  }, [])

  // No session: the initial state, and the state after a sign-out.
  useEffect(() => portal.onAuthenticationRequired(() => setEndUserId(null)), [])

  // A live session ended somewhere this app cannot see.
  useEffect(
    () =>
      portal.onSessionInvalidated((reason) => {
        console.warn('❌ session ended:', reason)
        setEndUserId(null)
      }),
    [],
  )

  return (
    <SignedInUser.Provider value={{ endUserId, adopt }}>
      {children}
    </SignedInUser.Provider>
  )
}

import type { AuthMethodsResult } from '@portal-hq/web'

import { portal } from './portal'

const loadMethods = async (): Promise<AuthMethodsResult> => {
  const methods = await portal.auth.getMethods()

  console.log('✅ enabled:', methods.allowedAuthMethods) // ['GOOGLE', 'EMAIL_MAGIC_LINK']
  console.log('✅ autoCreateWallet:', methods.autoCreateWallet)

  return methods
}

import { AuthMethod } from '@portal-hq/web'

import { portal } from './portal'

const signInWithProvider = async (method: AuthMethod.Google | AuthMethod.Apple) => {
  const { authorizeUrl } = await portal.auth.getAuthorizeUrl(method)

  window.location.assign(authorizeUrl)
}

import { portal } from './portal'

const sendMagicLink = async (input: string) => {
  // The API requires a lowercase address and rejects anything else with a 400.
  const email = input.trim().toLowerCase()

  await portal.auth.sendMagicLink(email)

  console.log(`✅ magic link sent — check ${email}`)
}

import { useEffect, useRef, useState } from 'react'

import type { TotpRequiredResult } from '@portal-hq/web'

import { portal } from './portal'
import { useSignedInUser } from './SignedInUserProvider'

type Status = 'working' | 'signedIn' | 'totpRequired' | 'ignored' | 'error'

export const AuthCallback = () => {
  const { adopt } = useSignedInUser()
  const [status, setStatus] = useState<Status>('working')
  const [totp, setTotp] = useState<TotpRequiredResult | null>(null)
  const started = useRef(false)

  useEffect(() => {
    const start = () => {
      // Either signal can arrive first — only run once.
      if (started.current) return
      started.current = true

      portal.auth
        .handleRedirect(window.location.href)
        .then((result) => {
          // Not a Client Auth redirect.
          if (!result) {
            setStatus('ignored')
            return
          }

          if (result.status === 'totpRequired') {
            setTotp(result)
            setStatus('totpRequired')
            return
          }

          // The authoritative "signed in" signal.
          adopt(result.session)
          setStatus('signedIn')
        })
        .catch((error: unknown) => {
          console.error('❌ handleRedirect failed:', error)
          setStatus('error')
        })
    }

    const unsubscribeReady = portal.onReady(start)
    const unsubscribeAuth = portal.onAuthenticationRequired(start)

    return () => {
      unsubscribeReady()
      unsubscribeAuth()
    }
  }, [adopt])

  if (status === 'totpRequired' && totp) {
    return <TotpPrompt challenge={totp} />
  }

  return <p>{status === 'error' ? 'Sign-in failed.' : 'Signing you in…'}</p>
}

import { useState } from 'react'
import { QRCodeSVG } from 'qrcode.react'

import type { TotpRequiredResult } from '@portal-hq/web'

import { portal } from './portal'
import { useSignedInUser } from './SignedInUserProvider'

export const TotpPrompt = ({ challenge }: { challenge: TotpRequiredResult }) => {
  const { adopt } = useSignedInUser()
  const [code, setCode] = useState('')
  const [error, setError] = useState<string | null>(null)

  const submit = async () => {
    try {
      const result = await portal.auth.verifyTotp(code, challenge.userJwt)

      // Same authoritative signal as the redirect path.
      adopt(result.session)
    } catch {
      // A rejected code does not consume the userJwt, so prompting again is normal.
      setError('That code was not accepted. Try the next one from your app.')
      setCode('')
    }
  }

  return (
    <div>
      {challenge.totpLink && <QRCodeSVG value={challenge.totpLink} />}
      <input value={code} onChange={(event) => setCode(event.target.value)} />
      <button onClick={submit}>Verify</button>
      {error && <p>{error}</p>}
    </div>
  )
}

import type { SessionIdentity } from '@portal-hq/web'

import { portal } from './portal'

const restore = async (
  adopt: (identity: SessionIdentity) => void,
): Promise<SessionIdentity | null> => {
  const identity = await portal.auth.restoreSession()

  if (!identity) {
    console.log('✅ nothing stored — show the sign-in UI')
    return null
  }

  adopt(identity)

  return identity
}

import { portal } from './portal'

const signOut = async () => {
  await portal.auth.clearSession()
}

import { PortalCredentialError } from '@portal-hq/web'

const describe = (error: unknown): string => {
  if (PortalCredentialError.is(error)) {
    return error.requiresReauthentication
      ? 'Your session ended. Please sign in again.'
      : 'Could not read your session. Please try again.'
  }

  return 'Something went wrong.'
}