@propelauth/nextjs 0.0.71 → 0.0.77

package/README.md

@@ -4,7 +4,7 @@
 
 This library provides a simple way to integrate your Next.js application (either AppRouter or Pages) with PropelAuth.
 
-Next.js SSR/AppRouter support is in beta, while in beta, you'll need to reach out to support@propelauth.com to have this enabled for your account. 
+Next.js SSR/AppRouter support is currently in beta.
 
 ## Installation
 
@@ -40,7 +40,6 @@ In your `src/app/api/auth/[slug]` directory, create a file called `route.ts` wit
 
 ```typescript
 import {getRouteHandlers} from "@propelauth/nextjs/server/app-router";
-import {User} from "@propelauth/nextjs/server";
 import {NextRequest} from "next/server";
 
 // postLoginRedirectPathFn is optional, but if you want to redirect the user to a different page after login, you can do so here.
@@ -55,7 +54,7 @@ export const POST = routeHandlers.postRouteHandler
 
 ### 2. Set up AuthProvider 
 
-#### AppRouter Version
+#### App Router 
 
 In your root layout, `src/app/layout.tsx`, add the `AuthProvider`:
 
@@ -71,7 +70,7 @@ export default async function RootLayout({children}: {children: React.ReactNode}
 }
 ```
 
-#### Pages Version
+#### Pages Router
 
 In your `_app.tsx` file, add the `AuthProvider`:
 
@@ -85,7 +84,7 @@ export default function MyApp({Component, pageProps}: AppProps) {
 }
 ```
 
-### 3. Set up middleware (AppRouter only - skip if using Pages)
+### 3. Set up middleware (App Router only - skip if using Pages)
 
 In your `src/middleware.ts` file, add the following:
 
@@ -108,7 +107,7 @@ export const config = {
 
 ## Usage
 
-### Get the user in Server Components (AppRouter example)
+### Get the user in Server Components (App Router example)
 
 ```tsx
 import {getUser} from "@propelauth/nextjs/server/app-router";
@@ -125,7 +124,7 @@ const WelcomeMessage = async () => {
 ```
 
 ```tsx
-import {getUser} from "@propelauth/nextjs/server/app-router";
+import {getUserOrRedirect} from "@propelauth/nextjs/server/app-router";
 
 const WelcomeMessage = async () => {
     // If the user is not logged in, they will be redirected to the login page
@@ -157,6 +156,21 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
 }
 ```
 
+### Get the user in API Routes (Pages example)
+
+```ts
+import {NextApiRequest, NextApiResponse} from "next";
+import {getUserFromApiRouteRequest} from "@propelauth/nextjs/server/pages";
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+    const user = await getUserFromApiRouteRequest(req, res)
+    if (user) {
+        res.status(200).json({email: user.email})
+    } else {
+        res.status(401).json({error: "unauthorized"})
+    }
+}
+```
 
 ### Get the user in Client Components
 
@@ -180,7 +194,7 @@ const WelcomeMessage = () => {
 
 ### Checking organization membership / RBAC
 
-Note that this works on both the client and server's `User` object, but the below example is on the server.
+Note that this works on both the client's `User` object or the client/server `UserFromToken` object, but the below example is on the server.
 
 If you are curious where the organization information comes from, check out our documentation on [organizations](https://docs.propelauth.com/overview/organizations?utm_source=github&utm_medium=library&utm_campaign=nextjs).
 The quick answer is:
@@ -254,3 +268,31 @@ export default function AccountAndOrgButtons() {
     </>
 }
 ```
+
+### Using APIs
+
+You can use our [APIs](https://docs.propelauth.com/reference/backend-apis/node) like so:
+
+```ts
+import {getPropelAuthApis} from "@propelauth/nextjs/server";
+
+const apis = getPropelAuthApis()
+await apis.disableUser(userId)
+```
+
+### Making a call to an external API
+
+PropelAuth also supports backend that are not Next.js. To make an [authenticated request](https://docs.propelauth.com/getting-started/making-authenticated-requests)
+to an external API, you'll need an access token. You can get an access token on the frontend from the `useUser` hook:
+
+```tsx
+import {useUser} from "@propelauth/nextjs/client";
+
+const MyComponent = () => {
+    const {loading, accessToken} = useUser()
+    
+    // Make a request to an external API with useEffect, useQuery, etc.
+}
+```
+
+Within the App Router, you can also call `getAccessToken` to get the access token.

package/dist/client/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 
-declare class User {
+declare class UserFromToken {
     userId: string;
     orgIdToOrgMemberInfo?: OrgIdToOrgMemberInfo;
     email: string;
@@ -14,7 +14,7 @@ declare class User {
     getOrgByName(orgName: string): OrgMemberInfo | undefined;
     getOrgs(): OrgMemberInfo[];
     isImpersonating(): boolean;
-    static fromJSON(json: string): User;
+    static fromJSON(json: string): UserFromToken;
 }
 type OrgIdToOrgMemberInfo = {
     [orgId: string]: OrgMemberInfo;
@@ -42,30 +42,73 @@ declare class OrgMemberInfo {
     get permissions(): string[];
 }
 
-type AuthProviderProps = {
-    authUrl: string;
-    children?: React.ReactNode;
-};
-declare const AuthProvider: (props: AuthProviderProps) => React.JSX.Element;
-
+declare class User {
+    userId: string;
+    email: string;
+    emailConfirmed: boolean;
+    hasPassword: boolean;
+    username?: string;
+    firstName?: string;
+    lastName?: string;
+    pictureUrl?: string;
+    orgIdToOrgMemberInfo?: OrgIdToOrgMemberInfo;
+    mfaEnabled: boolean;
+    canCreateOrgs: boolean;
+    updatePasswordRequired: boolean;
+    createdAt: number;
+    lastActiveAt: number;
+    legacyUserId?: string;
+    impersonatorUserId?: string;
+    constructor({ userId, email, emailConfirmed, hasPassword, username, firstName, lastName, pictureUrl, orgIdToOrgMemberInfo, mfaEnabled, canCreateOrgs, updatePasswordRequired, createdAt, lastActiveAt, legacyUserId, impersonatorUserId, }: {
+        userId: string;
+        email: string;
+        emailConfirmed: boolean;
+        hasPassword: boolean;
+        username?: string;
+        firstName?: string;
+        lastName?: string;
+        pictureUrl?: string;
+        orgIdToOrgMemberInfo?: OrgIdToOrgMemberInfo;
+        mfaEnabled: boolean;
+        canCreateOrgs: boolean;
+        updatePasswordRequired: boolean;
+        createdAt: number;
+        lastActiveAt: number;
+        legacyUserId?: string;
+        impersonatorUserId?: string;
+    });
+    getOrg(orgId: string): OrgMemberInfo | undefined;
+    getOrgByName(orgName: string): OrgMemberInfo | undefined;
+    getOrgs(): OrgMemberInfo[];
+    isImpersonating(): boolean;
+}
 type UseUserLoading = {
     loading: true;
     isLoggedIn: never;
     user: never;
+    accessToken: never;
 };
 type UseUserLoggedIn = {
     loading: false;
     isLoggedIn: true;
     user: User;
+    accessToken: string;
 };
 type UseUserNotLoggedIn = {
     loading: false;
     isLoggedIn: false;
     user: undefined;
+    accessToken: undefined;
 };
 type UseUser = UseUserLoading | UseUserLoggedIn | UseUserNotLoggedIn;
 declare function useUser(): UseUser;
 
+type AuthProviderProps = {
+    authUrl: string;
+    children?: React.ReactNode;
+};
+declare const AuthProvider: (props: AuthProviderProps) => React.JSX.Element;
+
 declare function useHostedPageUrls(): {
     getLoginPageUrl: () => string;
     getSignupPageUrl: () => string;
@@ -92,4 +135,4 @@ declare function RedirectToLogin({ children }: RedirectProps): React.JSX.Element
 
 declare function useRefreshAuth(): () => Promise<User | undefined>;
 
-export { AuthProvider, AuthProviderProps, OrgIdToOrgMemberInfo, OrgMemberInfo, RedirectProps, RedirectToLogin, RedirectToSignup, UseUser, UseUserLoading, UseUserLoggedIn, UseUserNotLoggedIn, User, useHostedPageUrls, useLogoutFunction, useRedirectFunctions, useRefreshAuth, useUser };
+export { AuthProvider, AuthProviderProps, OrgIdToOrgMemberInfo, OrgMemberInfo, RedirectProps, RedirectToLogin, RedirectToSignup, UseUser, UseUserLoading, UseUserLoggedIn, UseUserNotLoggedIn, User, UserFromToken, useHostedPageUrls, useLogoutFunction, useRedirectFunctions, useRefreshAuth, useUser };

package/dist/client/index.js

@@ -56,6 +56,7 @@ __export(client_exports, {
   RedirectToLogin: () => RedirectToLogin,
   RedirectToSignup: () => RedirectToSignup,
   User: () => User,
+  UserFromToken: () => UserFromToken,
   useHostedPageUrls: () => useHostedPageUrls,
   useLogoutFunction: () => useLogoutFunction,
   useRedirectFunctions: () => useRedirectFunctions,
@@ -65,7 +66,7 @@ __export(client_exports, {
 module.exports = __toCommonJS(client_exports);
 
 // src/user.ts
-var User = class {
+var UserFromToken = class {
   constructor(userId, email, orgIdToOrgMemberInfo, firstName, lastName, username, legacyUserId, impersonatorUserId) {
     this.userId = userId;
     this.orgIdToOrgMemberInfo = orgIdToOrgMemberInfo;
@@ -112,7 +113,7 @@ var User = class {
         JSON.stringify(obj.orgIdToOrgMemberInfo[orgId])
       );
     }
-    return new User(
+    return new UserFromToken(
       obj.userId,
       obj.email,
       orgIdToOrgMemberInfo,
@@ -170,9 +171,30 @@ var OrgMemberInfo = class {
     return this.userPermissions;
   }
 };
+function toOrgIdToOrgMemberInfo(snake_case) {
+  if (snake_case === void 0) {
+    return void 0;
+  }
+  const camelCase = {};
+  for (const key of Object.keys(snake_case)) {
+    const snakeCaseValue = snake_case[key];
+    if (snakeCaseValue) {
+      camelCase[key] = new OrgMemberInfo(
+        snakeCaseValue.org_id,
+        snakeCaseValue.org_name,
+        snakeCaseValue.org_metadata,
+        snakeCaseValue.url_safe_org_name,
+        snakeCaseValue.user_role,
+        snakeCaseValue.inherited_user_roles_plus_current_role,
+        snakeCaseValue.user_permissions
+      );
+    }
+  }
+  return camelCase;
+}
 
 // src/client/AuthProvider.tsx
-var import_react = __toESM(require("react"));
+var import_react2 = __toESM(require("react"));
 
 // src/client/utils.ts
 var USER_INFO_KEY = "__PROPEL_AUTH_USER_INFO";
@@ -237,53 +259,162 @@ function isEqual(a, b) {
 
 // src/client/AuthProvider.tsx
 var import_navigation = require("next/navigation");
-var AuthContext = import_react.default.createContext(void 0);
+
+// src/client/useUser.tsx
+var import_react = require("react");
+var User = class {
+  constructor({
+    userId,
+    email,
+    emailConfirmed,
+    hasPassword,
+    username,
+    firstName,
+    lastName,
+    pictureUrl,
+    orgIdToOrgMemberInfo,
+    mfaEnabled,
+    canCreateOrgs,
+    updatePasswordRequired,
+    createdAt,
+    lastActiveAt,
+    legacyUserId,
+    impersonatorUserId
+  }) {
+    this.userId = userId;
+    this.email = email;
+    this.emailConfirmed = emailConfirmed;
+    this.hasPassword = hasPassword;
+    this.username = username;
+    this.firstName = firstName;
+    this.lastName = lastName;
+    this.pictureUrl = pictureUrl;
+    this.orgIdToOrgMemberInfo = orgIdToOrgMemberInfo;
+    this.mfaEnabled = mfaEnabled;
+    this.canCreateOrgs = canCreateOrgs;
+    this.updatePasswordRequired = updatePasswordRequired;
+    this.createdAt = createdAt;
+    this.lastActiveAt = lastActiveAt;
+    this.legacyUserId = legacyUserId;
+    this.impersonatorUserId = impersonatorUserId;
+  }
+  getOrg(orgId) {
+    var _a;
+    return (_a = this.orgIdToOrgMemberInfo) == null ? void 0 : _a[orgId];
+  }
+  getOrgByName(orgName) {
+    if (!this.orgIdToOrgMemberInfo) {
+      return void 0;
+    }
+    const urlSafeOrgName = orgName.toLowerCase().replace(/ /g, "-");
+    for (const orgId in this.orgIdToOrgMemberInfo) {
+      const orgMemberInfo = this.orgIdToOrgMemberInfo[orgId];
+      if (orgMemberInfo.urlSafeOrgName === urlSafeOrgName) {
+        return orgMemberInfo;
+      }
+    }
+    return void 0;
+  }
+  getOrgs() {
+    if (!this.orgIdToOrgMemberInfo) {
+      return [];
+    }
+    return Object.values(this.orgIdToOrgMemberInfo);
+  }
+  isImpersonating() {
+    return !!this.impersonatorUserId;
+  }
+};
+function useUser() {
+  const context = (0, import_react.useContext)(AuthContext);
+  if (context === void 0) {
+    throw new Error("useUser must be used within an AuthProvider");
+  }
+  const { loading, userAndAccessToken } = context;
+  if (loading) {
+    return {
+      loading: true,
+      isLoggedIn: void 0,
+      user: void 0,
+      accessToken: void 0
+    };
+  } else if (userAndAccessToken.user) {
+    return {
+      loading: false,
+      isLoggedIn: true,
+      user: userAndAccessToken.user,
+      accessToken: userAndAccessToken.accessToken
+    };
+  } else {
+    return {
+      loading: false,
+      isLoggedIn: false,
+      user: void 0,
+      accessToken: void 0
+    };
+  }
+}
+
+// src/client/AuthProvider.tsx
+var AuthContext = import_react2.default.createContext(void 0);
 var initialAuthState = {
   loading: true,
-  user: void 0,
+  userAndAccessToken: {
+    user: void 0,
+    accessToken: void 0
+  },
   authChangeDetected: false
 };
 function authStateReducer(_state, action) {
-  const authChangeDetected = !_state.loading && !isEqual(action.user, _state.user);
+  const authChangeDetected = !_state.loading && !isEqual(action.user, _state.userAndAccessToken.user);
   if (!action.user) {
     return {
       loading: false,
-      user: void 0,
+      userAndAccessToken: {
+        user: void 0,
+        accessToken: void 0
+      },
       authChangeDetected
     };
   } else if (_state.loading) {
     return {
       loading: false,
-      user: action.user,
+      userAndAccessToken: {
+        user: action.user,
+        accessToken: action.accessToken
+      },
       authChangeDetected
     };
   } else {
     return {
       loading: false,
-      user: action.user,
+      userAndAccessToken: {
+        user: action.user,
+        accessToken: action.accessToken
+      },
       authChangeDetected
     };
   }
 }
 var AuthProvider = (props) => {
-  const [authState, dispatchInner] = (0, import_react.useReducer)(authStateReducer, initialAuthState);
+  const [authState, dispatchInner] = (0, import_react2.useReducer)(authStateReducer, initialAuthState);
   const router = (0, import_navigation.useRouter)();
-  const dispatch = (0, import_react.useCallback)((action) => {
+  const dispatch = (0, import_react2.useCallback)((action) => {
     dispatchInner(action);
     saveUserToLocalStorage(action.user);
   }, [dispatchInner]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (authState.authChangeDetected) {
       router.refresh();
     }
   }, [authState.authChangeDetected, router]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     let didCancel = false;
     function refreshAuthInfo2() {
       return __async(this, null, function* () {
-        const { user } = yield apiGetUserInfo();
+        const action = yield apiGetUserInfo();
         if (!didCancel) {
-          dispatch({ user });
+          dispatch(action);
         }
       });
     }
@@ -292,19 +423,19 @@ var AuthProvider = (props) => {
       didCancel = true;
     };
   }, []);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     let didCancel = false;
     function refreshToken() {
       return __async(this, null, function* () {
-        const { user } = yield apiGetUserInfo();
+        const action = yield apiGetUserInfo();
         if (!didCancel) {
-          dispatch({ user });
+          dispatch(action);
         }
       });
     }
     function onStorageEvent(event) {
       return __async(this, null, function* () {
-        if (event.key === USER_INFO_KEY && !doesLocalStorageMatch(event.newValue, authState.user)) {
+        if (event.key === USER_INFO_KEY && !doesLocalStorageMatch(event.newValue, authState.userAndAccessToken.user)) {
           yield refreshToken();
         }
       });
@@ -324,8 +455,8 @@ var AuthProvider = (props) => {
         window.removeEventListener("focus", refreshToken);
       }
     };
-  }, [dispatch, authState.user]);
-  const logout = (0, import_react.useCallback)(() => __async(void 0, null, function* () {
+  }, [dispatch, authState.userAndAccessToken.user]);
+  const logout = (0, import_react2.useCallback)(() => __async(void 0, null, function* () {
     yield fetch("/api/auth/logout", {
       method: "POST",
       headers: {
@@ -333,14 +464,14 @@ var AuthProvider = (props) => {
       },
       credentials: "include"
     });
-    dispatch({ user: void 0 });
+    dispatch({ user: void 0, accessToken: void 0 });
   }), [dispatch]);
   const getLoginPageUrl = () => "/api/auth/login";
   const getSignupPageUrl = () => "/api/auth/signup";
-  const getAccountPageUrl = (0, import_react.useCallback)(() => {
+  const getAccountPageUrl = (0, import_react2.useCallback)(() => {
     return `${props.authUrl}/account`;
   }, [props.authUrl]);
-  const getOrgPageUrl = (0, import_react.useCallback)(
+  const getOrgPageUrl = (0, import_react2.useCallback)(
     (orgId) => {
       if (orgId) {
         return `${props.authUrl}/org?id=${orgId}`;
@@ -350,10 +481,10 @@ var AuthProvider = (props) => {
     },
     [props.authUrl]
   );
-  const getCreateOrgPageUrl = (0, import_react.useCallback)(() => {
+  const getCreateOrgPageUrl = (0, import_react2.useCallback)(() => {
     return `${props.authUrl}/create_org`;
   }, [props.authUrl]);
-  const getSetupSAMLPageUrl = (0, import_react.useCallback)(
+  const getSetupSAMLPageUrl = (0, import_react2.useCallback)(
     (orgId) => {
       return `${props.authUrl}/saml?id=${orgId}`;
     },
@@ -369,13 +500,13 @@ var AuthProvider = (props) => {
   const redirectToCreateOrgPage = () => redirectTo(getCreateOrgPageUrl());
   const redirectToSetupSAMLPage = (orgId) => redirectTo(getSetupSAMLPageUrl(orgId));
   const refreshAuthInfo = () => __async(void 0, null, function* () {
-    const { user } = yield apiGetUserInfo();
-    dispatch({ user });
-    return user;
+    const action = yield apiGetUserInfo();
+    dispatch(action);
+    return action.user;
   });
   const value = {
     loading: authState.loading,
-    user: authState.user,
+    userAndAccessToken: authState.userAndAccessToken,
     logout,
     redirectToLoginPage,
     redirectToSignupPage,
@@ -391,7 +522,7 @@ var AuthProvider = (props) => {
     getSetupSAMLPageUrl,
     refreshAuthInfo
   };
-  return /* @__PURE__ */ import_react.default.createElement(AuthContext.Provider, { value }, props.children);
+  return /* @__PURE__ */ import_react2.default.createElement(AuthContext.Provider, { value }, props.children);
 };
 function apiGetUserInfo() {
   return __async(this, null, function* () {
@@ -404,11 +535,27 @@ function apiGetUserInfo() {
         credentials: "include"
       });
       if (userInfoResponse.ok) {
-        const userJson = yield userInfoResponse.text();
-        const user = User.fromJSON(userJson);
-        return { user };
+        const { userinfo, accessToken, impersonatorUserId } = yield userInfoResponse.json();
+        const user = new User({
+          userId: userinfo.user_id,
+          email: userinfo.email,
+          emailConfirmed: userinfo.email_confirmed,
+          hasPassword: userinfo.has_password,
+          username: userinfo.username,
+          firstName: userinfo.first_name,
+          lastName: userinfo.last_name,
+          pictureUrl: userinfo.picture_url,
+          orgIdToOrgMemberInfo: toOrgIdToOrgMemberInfo(userinfo.org_id_to_org_info),
+          mfaEnabled: userinfo.mfa_enabled,
+          canCreateOrgs: userinfo.can_create_orgs,
+          updatePasswordRequired: userinfo.update_password_required,
+          createdAt: userinfo.created_at,
+          lastActiveAt: userinfo.last_active_at,
+          impersonatorUserId
+        });
+        return { user, accessToken };
       } else if (userInfoResponse.status === 401) {
-        return { user: void 0 };
+        return { user: void 0, accessToken: void 0 };
       } else {
         console.log("Failed to refresh token", userInfoResponse);
       }
@@ -419,35 +566,6 @@ function apiGetUserInfo() {
   });
 }
 
-// src/client/useUser.tsx
-var import_react2 = require("react");
-function useUser() {
-  const context = (0, import_react2.useContext)(AuthContext);
-  if (context === void 0) {
-    throw new Error("useUser must be used within an AuthProvider");
-  }
-  const { loading, user } = context;
-  if (loading) {
-    return {
-      loading: true,
-      isLoggedIn: void 0,
-      user: void 0
-    };
-  } else if (user) {
-    return {
-      loading: false,
-      isLoggedIn: true,
-      user
-    };
-  } else {
-    return {
-      loading: false,
-      isLoggedIn: false,
-      user: void 0
-    };
-  }
-}
-
 // src/client/useHostedPageUrls.tsx
 var import_react3 = require("react");
 function useHostedPageUrls() {
@@ -538,6 +656,7 @@ function useRefreshAuth() {
   RedirectToLogin,
   RedirectToSignup,
   User,
+  UserFromToken,
   useHostedPageUrls,
   useLogoutFunction,
   useRedirectFunctions,