[FEAT] Active Org (#65)

* feat(accessTokenForOrg): export access token for org function where applicable

* refactor: rename function

* use real published JS version

* feat: use JS version, use tokens interface instead of function itself

* 2.0.22

Author: Itai Levi

package-lock.json

@@ -5,15 +5,15 @@
         "type": "git",
         "url": "https://github.com/PropelAuth/react"
     },
-    "version": "2.0.21",
+    "version": "2.0.22",
     "license": "MIT",
     "keywords": [
         "auth",
         "react",
         "user"
     ],
     "dependencies": {
-        "@propelauth/javascript": "^2.0.16",
+        "@propelauth/javascript": "^2.0.17",
         "hoist-non-react-statics": "^3.3.2",
         "utility-types": "^3.10.0"
     },

package.json

@@ -1,4 +1,5 @@
 import {
+    AccessTokenForActiveOrg,
     AuthenticationInfo,
     RedirectToAccountOptions,
     RedirectToCreateOrgOptions,
@@ -11,7 +12,11 @@ import React, { useCallback, useEffect, useReducer } from "react"
 import { loadOrgSelectionFromLocalStorage } from "./hooks/useActiveOrg"
 import { useClientRef, useClientRefCallback } from "./useClientRef"
 
-interface InternalAuthState {
+export interface Tokens {
+    getAccessTokenForOrg: (orgId: string) => Promise<AccessTokenForActiveOrg>
+}
+
+export interface InternalAuthState {
     loading: boolean
     authInfo: AuthenticationInfo | null
 
@@ -31,7 +36,7 @@ interface InternalAuthState {
     getOrgPageUrl(orgId?: string, options?: RedirectToOrgPageOptions): string
     getCreateOrgPageUrl(options?: RedirectToCreateOrgOptions): string
     getSetupSAMLPageUrl(orgId: string, options?: RedirectToSetupSAMLPageOptions): string
-
+    tokens: Tokens
     refreshAuthInfo: () => Promise<void>
     defaultDisplayWhileLoading?: React.ReactElement
     defaultDisplayIfLoggedOut?: React.ReactElement
@@ -143,6 +148,8 @@ export const AuthProvider = (props: AuthProviderProps) => {
     const getCreateOrgPageUrl = useClientRefCallback(clientRef, (client) => client.getCreateOrgPageUrl)
     const getSetupSAMLPageUrl = useClientRefCallback(clientRef, (client) => client.getSetupSAMLPageUrl)
 
+    const getAccessTokenForOrg = useClientRefCallback(clientRef, (client) => client.getAccessTokenForOrg)
+
     const refreshAuthInfo = useCallback(async () => {
         if (clientRef.current === null) {
             return
@@ -177,6 +184,9 @@ export const AuthProvider = (props: AuthProviderProps) => {
         getCreateOrgPageUrl,
         getSetupSAMLPageUrl,
         refreshAuthInfo,
+        tokens: {
+            getAccessTokenForOrg,
+        },
     }
     return <AuthContext.Provider value={value}>{props.children}</AuthContext.Provider>
 }

src/AuthContext.tsx

@@ -11,7 +11,7 @@ import {
     UserClass,
 } from "@propelauth/javascript"
 import React from "react"
-import { AuthContext } from "./AuthContext"
+import { AuthContext, InternalAuthState } from "./AuthContext"
 
 // User information that we will hard code within the AuthProvider
 export type UserInformationForTesting = {
@@ -39,7 +39,7 @@ export const AuthProviderForTesting = ({
 }: AuthProviderForTestingProps) => {
     const authInfo = getAuthInfoForTesting(userInformation)
     const activeOrgFnWithDefault = activeOrgFn ? activeOrgFn : () => null
-    const contextValue = {
+    const contextValue: InternalAuthState = {
         loading: !!loading,
         authInfo,
         logout: () => Promise.resolve(),
@@ -57,6 +57,13 @@ export const AuthProviderForTesting = ({
         getSetupSAMLPageUrl: () => "",
         activeOrgFn: activeOrgFnWithDefault,
         refreshAuthInfo: () => Promise.resolve(),
+        tokens: {
+            getAccessTokenForOrg: () =>
+                Promise.resolve({
+                    error: undefined,
+                    accessToken: "ACCESS_TOKEN",
+                }),
+        },
     }
 
     return <AuthContext.Provider value={contextValue}>{children}</AuthContext.Provider>

src/AuthContextForTesting.tsx

@@ -1,6 +1,6 @@
 import { AccessHelper, OrgHelper, User, UserClass } from "@propelauth/javascript"
 import { useContext } from "react"
-import { AuthContext } from "../AuthContext"
+import { AuthContext, Tokens } from "../AuthContext"
 
 export type UseAuthInfoLoading = {
     loading: true
@@ -13,6 +13,7 @@ export type UseAuthInfoLoading = {
     isImpersonating: undefined
     impersonatorUserId: undefined
     refreshAuthInfo: () => Promise<void>
+    tokens: Tokens
     accessTokenExpiresAtSeconds: undefined
 }
 
@@ -27,6 +28,7 @@ export type UseAuthInfoLoggedInProps = {
     isImpersonating: boolean
     impersonatorUserId?: string
     refreshAuthInfo: () => Promise<void>
+    tokens: Tokens
     accessTokenExpiresAtSeconds: number
 }
 
@@ -41,6 +43,7 @@ export type UseAuthInfoNotLoggedInProps = {
     isImpersonating: false
     impersonatorUserId: undefined
     refreshAuthInfo: () => Promise<void>
+    tokens: Tokens
     accessTokenExpiresAtSeconds: undefined
 }
 
@@ -52,7 +55,7 @@ export function useAuthInfo(): UseAuthInfoProps {
         throw new Error("useAuthInfo must be used within an AuthProvider or RequiredAuthProvider")
     }
 
-    const { loading, authInfo, refreshAuthInfo } = context
+    const { loading, authInfo, refreshAuthInfo, tokens } = context
     if (loading) {
         return {
             loading: true,
@@ -65,6 +68,7 @@ export function useAuthInfo(): UseAuthInfoProps {
             isImpersonating: undefined,
             impersonatorUserId: undefined,
             refreshAuthInfo,
+            tokens,
             accessTokenExpiresAtSeconds: undefined,
         }
     } else if (authInfo && authInfo.accessToken) {
@@ -79,6 +83,7 @@ export function useAuthInfo(): UseAuthInfoProps {
             isImpersonating: !!authInfo.impersonatorUserId,
             impersonatorUserId: authInfo.impersonatorUserId,
             refreshAuthInfo,
+            tokens,
             accessTokenExpiresAtSeconds: authInfo.expiresAtSeconds,
         }
     }
@@ -93,6 +98,7 @@ export function useAuthInfo(): UseAuthInfoProps {
         isImpersonating: false,
         impersonatorUserId: undefined,
         refreshAuthInfo,
+        tokens,
         accessTokenExpiresAtSeconds: undefined,
     }
 }

src/hooks/useAuthInfo.ts

@@ -2,7 +2,7 @@ import { AccessHelper, OrgHelper, User, UserClass } from "@propelauth/javascript
 import hoistNonReactStatics from "hoist-non-react-statics"
 import React, { useContext } from "react"
 import { Subtract } from "utility-types"
-import { AuthContext } from "./AuthContext"
+import { AuthContext, Tokens } from "./AuthContext"
 
 export type WithLoggedInAuthInfoProps = {
     isLoggedIn: true
@@ -14,6 +14,7 @@ export type WithLoggedInAuthInfoProps = {
     isImpersonating: boolean
     impersonatorUserId?: string
     refreshAuthInfo: () => Promise<void>
+    tokens: Tokens
     accessTokenExpiresAtSeconds: number
 }
 
@@ -27,6 +28,7 @@ export type WithNotLoggedInAuthInfoProps = {
     isImpersonating: false
     impersonatorUserId: null
     refreshAuthInfo: () => Promise<void>
+    tokens: Tokens
     accessTokenExpiresAtSeconds: null
 }
 
@@ -48,7 +50,7 @@ export function withAuthInfo<P extends WithAuthInfoProps>(
             throw new Error("withAuthInfo must be used within an AuthProvider or RequiredAuthProvider")
         }
 
-        const { loading, authInfo, defaultDisplayWhileLoading, refreshAuthInfo } = context
+        const { loading, authInfo, defaultDisplayWhileLoading, refreshAuthInfo, tokens } = context
 
         function displayLoading() {
             if (args?.displayWhileLoading) {
@@ -73,6 +75,7 @@ export function withAuthInfo<P extends WithAuthInfoProps>(
                 isImpersonating: !!authInfo.impersonatorUserId,
                 impersonatorUserId: authInfo.impersonatorUserId,
                 refreshAuthInfo,
+                tokens,
                 accessTokenExpiresAtSeconds: authInfo.expiresAtSeconds,
             }
             return <Component {...loggedInProps} />
@@ -88,6 +91,7 @@ export function withAuthInfo<P extends WithAuthInfoProps>(
                 isImpersonating: false,
                 impersonatorUserId: null,
                 refreshAuthInfo,
+                tokens,
                 accessTokenExpiresAtSeconds: null,
             }
             return <Component {...notLoggedInProps} />

src/withAuthInfo.tsx

@@ -22,7 +22,8 @@ export function withRequiredAuthInfo<P extends WithLoggedInAuthInfoProps>(
             throw new Error("withRequiredAuthInfo must be used within an AuthProvider or RequiredAuthProvider")
         }
 
-        const { loading, authInfo, defaultDisplayIfLoggedOut, defaultDisplayWhileLoading, refreshAuthInfo } = context
+        const { loading, authInfo, defaultDisplayIfLoggedOut, defaultDisplayWhileLoading, refreshAuthInfo, tokens } =
+            context
 
         function displayLoading() {
             if (args?.displayWhileLoading) {
@@ -56,6 +57,7 @@ export function withRequiredAuthInfo<P extends WithLoggedInAuthInfoProps>(
                 isImpersonating: !!authInfo.impersonatorUserId,
                 impersonatorUserId: authInfo.impersonatorUserId,
                 refreshAuthInfo,
+                tokens,
                 accessTokenExpiresAtSeconds: authInfo.expiresAtSeconds,
             }
             return <Component {...loggedInProps} />