Custom React hook to help with Xano authentication and authorization in Draftbit

xano-auth-snippet.js

import React from 'react';
import { useNavigation } from '@react-navigation/native';

import * as GlobalVariableContext from "./config/GlobalVariableContext";

/**
 * Custom React Hook snippet for Xano (https://www.xano.com) authentication.  
 * 
 * Checkout Draftbit docs and community to learn more about using this snippet
 * in Draftbit.
 *  - https://draftbit.com
 *  - https://community.draftbit.com
 *  - https://docs.draftbit.com
 */
export function useXanoAuth({ baseUrl } = {}) {
  const { AUTH_TOKEN } = GlobalVariableContext.useValues();
  const setVariable = GlobalVariableContext.useSetValue();
  const { navigate } = useNavigation();

  if (!baseUrl) {
    throw Error(
      "Missing baseUrl for useXanoAuth hook:\nCustomCode.useXanoAuth({\n  baseUrl: \"Your Base Request URL here\"\n})"
    );
  }

  /**
   * Is `true` if there's already a token, that is, this user probably 
   * logged in already.
   */
  const isAuthenticated = Boolean(AUTH_TOKEN);
  
  /**
   * Call this function with an email and password to attempt to login.
   */
  const login = async ({ email, password }) => {
    const response = await fetch(baseUrl + "/auth/login", {
      method: "POST",
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ email, password })
    });
      
    const { authToken } = await response.json();
    
    setVariable({ 
      key: "AUTH_TOKEN",
      value: `Bearer ${authToken}`
    });
  };
  
  /**
   * Call this function to logout.
   */
  const logout = ({ redirectTo } = {}) => {
    setVariable({ key: "AUTH_TOKEN", value: "" });
    
    if (redirectTo) {
      navigate(redirectTo);
    }
  }
  
  /**
   * A separate React Hook for you to use on screens requring authentication.
   *
   * Redirects user to a screen of your choosing (usually, your login screen).
   */
  const useProtectScreen = ({ redirectTo } = {}) => {
    React.useEffect(() => {
      if (!redirectTo) {
        throw Error(
          "Missing redirectTo argument to useProtectScreen. It will not protect this screen."
        );
      }
      
      // If there is no AUTH_TOKEN, automatically redirect.
      if (!isAuthenticated) {
        return navigate(redirectTo);
      };
      
      // If there is a AUTH_TOKEN, check if it is still valid.
      fetch(baseUrl + "/auth/me", {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
          Authorization: AUTH_TOKEN
        },
      })
      .catch(() => {
        // If the request failed, then the auth token is bad.
        
        // clear the token
        useSetValue({ key: "AUTH_TOKEN", value: "" });
        
        // Redirect to (usually) the login screen.
        navigate(redirectTo);
      });
    }, []);
  };
  
  return {
    isAuthenticated,
    login, 
    logout,
    useProtectScreen
  };
}