pocketbase oauth with github and react ts

auth.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import PocketBase from 'pocketbase'

type DashState = {
  pb?: PocketBase;
  authenticated: boolean;
}
const defaultDashState : DashState = {
  authenticated: false,
}

type Context = {
  state: DashState;
  setState : (arg0:DashState) => void;
}

function callGithub(ctx:Context){
  // NB probably  broken with ios safari?
  return async function(ev:React.MouseEvent<HTMLAnchorElement>){
    ev.stopPropagation();
    const pb = ctx.state.pb;
    if (!pb) {
      console.log("Context uninitialized")
      return false;
    }
    console.log("TEST logging in to github");
    await pb.collection("users").authWithOAuth2({
      provider: "github",
      /*
      urlCallback: (_url) => {
        const redirectURL = import.meta.env.VITE_FRONTEND_URL+"auth/"
        window.location.href = redirectURL;
        //window.location.href = url;
      },
      */
    });
    const authenticated = pb.authStore.isValid;
    if (ctx.state.authenticated !== authenticated) {
      ctx.setState({...ctx.state, authenticated});
    }
    return false;
  }
}

function logout(ctx:Context){
  return async function(ev:React.MouseEvent<HTMLAnchorElement>){
    ev.stopPropagation();
    const pb = ctx.state.pb;
    if (!pb) {
      console.log("Context uninitialized")
      return false;
    }
    pb.authStore.clear();
    ctx.setState({...ctx.state, authenticated:false });
    return false;
  }
}

function Auth(){

  const [state, setState] = React.useState<DashState>(defaultDashState)

  const ctx = { state, setState }

  React.useEffect(() => {
    console.log("JOSH OK trying this")
    const pb = state.pb || new PocketBase(import.meta.env.VITE_BACKEND_URL)
    const store = pb?.authStore;
    if (!pb || !store) {
      // TODO set error in UI
      console.log("Major error in UI!")
      return
    }
    if (pb !== state.pb) {
      pb.authStore.onChange((token, model) => {
        console.log('TEST New store data:', token, model)
      });
    }
    const authenticated = store.isValid;
    console.log("TEST is authenticated?", authenticated);
    if (!state.pb || state.authenticated !== authenticated) {
      setState({...state, authenticated, pb })
      return
    }
  }, [state])

  if (!state.pb) {
    return <div>Initializing...</div>;
  } else if (!state.authenticated) {
    return <div>Authenticate <a href="#" onClick={callGithub(ctx)}>here</a>  with OTP Guard!</div>
  } else {
    return <div>Thanx for authenticating <div><a href="#" onClick={logout(ctx)}>Logout</a></div></div>;
  }
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <Auth />
  </React.StrictMode>,
)