overhaul of the information exposed by the context

This will make it possible to work out if you're logged out or the data hasn't been loaded yet

Author: aaronpowell

example/src/App.tsx

@@ -10,19 +10,24 @@ import {
 } from "@aaronpowell/react-static-web-apps-auth";
 
 const UserDisplay = () => {
-  const userInfo = useUserInfo();
-  if (userInfo.identityProvider) {
+  const { clientPrincipal, loaded } = useUserInfo();
+
+  if (!loaded) {
+    return <p>Checking user info...</p>;
+  }
+
+  if (clientPrincipal) {
     return (
       <div>
         <p>
-          {userInfo.identityProvider} {userInfo.userDetails} {userInfo.userId}{" "}
-          {userInfo.userRoles}
+          {clientPrincipal.identityProvider} {clientPrincipal.userDetails}{" "}
+          {clientPrincipal.userId} {clientPrincipal.userRoles}
         </p>
         <p>
           <Logout />
         </p>
         <p>
-          <UserPurge provider={userInfo.identityProvider} />
+          <UserPurge provider={clientPrincipal.identityProvider} />
         </p>
       </div>
     );

react-static-web-apps-auth/src/UserInfoContext.tsx

@@ -1,39 +1,58 @@
 import React, { useContext, useEffect, useState } from "react";
 import { AuthProviders } from "./types";
 
-export type UserInfo = {
-  identityProvider: undefined | AuthProviders;
-  userId: string | undefined;
-  userDetails: string | undefined;
+export type ClientPrincipal = {
+  identityProvider: AuthProviders;
+  userId: string;
+  userDetails: string;
   userRoles: string[];
 };
 
-const defaultUserInfo = {
-  identityProvider: undefined,
-  userId: undefined,
-  userDetails: undefined,
-  userRoles: [],
+export type UserInfoContext = {
+  loaded: boolean;
+  clientPrincipal: ClientPrincipal | null;
 };
 
-const UserInfoContext = React.createContext<UserInfo>(defaultUserInfo);
+const UserInfoContext = React.createContext<UserInfoContext>({
+  loaded: false,
+  clientPrincipal: null,
+});
 
 const UserInfoContextProvider = ({ children }: { children: JSX.Element }) => {
-  const [userInfo, setUserInfo] = useState<UserInfo>(defaultUserInfo);
+  const [
+    clientPrincipal,
+    setClientPrincipal,
+  ] = useState<ClientPrincipal | null>(null);
+  const [loaded, setLoaded] = useState(false);
 
   useEffect(() => {
     const run = async () => {
-      const res = await fetch("/.auth/me");
-      const json: { clientPrincipal: UserInfo | null } = await res.json();
-      if (json.clientPrincipal) {
-        setUserInfo(json.clientPrincipal);
+      try {
+        const res = await fetch("/.auth/me");
+        const json: {
+          clientPrincipal: ClientPrincipal | null;
+        } = await res.json();
+        if (json.clientPrincipal) {
+          setClientPrincipal(json.clientPrincipal);
+        }
+      } catch (e) {
+        if (window.location.hostname === "localhost") {
+          console.warn(
+            "Can't access the auth endoint. For local development, please use the Static Web Apps CLI to emulate authentication: https://github.com/azure/static-web-apps-cli"
+          );
+        } else {
+          console.error(`Failed to unpack JSON.`, e);
+        }
       }
+
+      setLoaded(true);
     };
 
     run();
   }, []);
 
   return (
-    <UserInfoContext.Provider value={userInfo}>
+    <UserInfoContext.Provider value={{ loaded, clientPrincipal }}>
       {children}
     </UserInfoContext.Provider>
   );

react-static-web-apps-auth/src/index.ts

@@ -1,6 +1,6 @@
 export { StaticWebAuthLogins, LoginProviderProps } from "./StaticWebAuthLogins";
 export {
-  UserInfo,
+  ClientPrincipal as UserInfo,
   UserInfoContextProvider,
   useUserInfo,
 } from "./UserInfoContext";