index.js

import React, { createContext, useContext, useState } from 'react'
import { AuthStatusCode, SimpleOTP } from '@simpleotp/core'

const SimpleOTPContext = createContext()

class ReactSimpleOTP extends SimpleOTP {
  constructor(siteID, apiURL = null) {
    super(siteID, apiURL)

    this._userRef = React.createRef()
    this._isAuthenticatedRef = React.createRef(Boolean(this.userRef.current))
  }

  _setAuthDetailsIfSuccessful(resp) {
    if (resp.code === AuthStatusCode.OK.description) {
      this._isAuthenticatedRef.current = true
      this._userRef.current = this.getUser()
    }
  }

  async auth(code) {
    const resp = await super.auth(code)
    this._setAuthDetailsIfSuccessful(resp)
    return resp
  }

  async authWithWebAuthnCredentials() {
    const resp = await super.authWithWebAuthnCredentials()
    this._setAuthDetailsIfSuccessful(resp)
    return resp
  }

  async authWithURLCode() {
    const resp = await super.authWithURLCode()
    this._setAuthDetailsIfSuccessful(resp)
    return resp
  }

  getIsAuthenticatedRef() {
    return this.isAuthenticatedRef
  }

  getUserRef() {
    return this.userRef
  }

  signOut() {
    super.signOut()
    this.isAuthenticatedRef.current = false
    this.userRef.current = null
  }
}

export function useSimpleOTP() {
  return useContext(SimpleOTPContext)
}

export function SimpleOTPProvider({ siteID, apiURL, children }) {
  const [simpleOTPInstance] = useState(() => new ReactSimpleOTP(siteID, apiURL))

  return (
    <SimpleOTPContext.Provider value={simpleOTPInstance}>
      {children}
    </SimpleOTPContext.Provider>
  )
}

export default SimpleOTPProvider