@propelauth/nextjs 0.3.6 → 0.3.8

package/README.md

@@ -31,30 +31,31 @@ When you copy the PROPELAUTH_VERIFIER_KEY from the PropelAuth dashboard, it will
 PROPELAUTH_VERIFIER_KEY=-----BEGIN PUBLIC KEY-----\nMIIBIjANBgk...
 ```
 
+If authentication URL needs to be set at runtime, use `PROPELAUTH_AUTH_URL`. Otherwise, it falls back to `NEXT_PUBLIC_AUTH_URL`, which is set at build time.
 
-For the PROPELAUTH_REDIRECT_URI variable, you need to add /api/auth/callback to the end of one of your allowed frontend locations. So, for example, if you are developing in the test environment and using http://localhost:3000, you would use http://localhost:3000/api/auth/callback 
+For the PROPELAUTH_REDIRECT_URI variable, you need to add /api/auth/callback to the end of one of your allowed frontend locations. So, for example, if you are developing in the test environment and using http://localhost:3000, you would use http://localhost:3000/api/auth/callback
 
 ### 1. Set up routes
 
 In your `src/app/api/auth/[slug]` directory, create a file called `route.ts` with the following content:
 
 ```typescript
-import {getRouteHandlers} from "@propelauth/nextjs/server/app-router";
-import {NextRequest} from "next/server";
+import { getRouteHandlers } from '@propelauth/nextjs/server/app-router'
+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.
 const routeHandlers = getRouteHandlers({
     postLoginRedirectPathFn: (req: NextRequest) => {
-        return "/"
-    }
+        return '/'
+    },
 })
 export const GET = routeHandlers.getRouteHandler
 export const POST = routeHandlers.postRouteHandler
 ```
 
-### 2. Set up AuthProvider 
+### 2. Set up AuthProvider
 
-#### App Router 
+#### App Router
 
 In your root layout, `src/app/layout.tsx`, add the `AuthProvider`:
 
@@ -89,7 +90,7 @@ export default function MyApp({Component, pageProps}: AppProps) {
 In your `src/middleware.ts` file, add the following:
 
 ```typescript
-import {authMiddleware} from "@propelauth/nextjs/server/app-router";
+import { authMiddleware } from '@propelauth/nextjs/server/app-router'
 
 export const middleware = authMiddleware
 
@@ -110,11 +111,11 @@ export const config = {
 ### Get the user in Server Components (App Router example)
 
 ```tsx
-import {getUser} from "@propelauth/nextjs/server/app-router";
+import { getUser } from '@propelauth/nextjs/server/app-router'
 
 const WelcomeMessage = async () => {
     const user = await getUser()
-    
+
     if (user) {
         return <div>Hello {user.firstName}!</div>
     } else {
@@ -124,12 +125,12 @@ const WelcomeMessage = async () => {
 ```
 
 ```tsx
-import {getUserOrRedirect} 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
     const user = await getUserOrRedirect()
-    
+
     return <div>Hello {user.firstName}!</div>
 }
 ```
@@ -137,11 +138,11 @@ const WelcomeMessage = async () => {
 ### Get the user in getServerSideProps (Pages example)
 
 ```tsx
-import {GetServerSideProps, InferGetServerSidePropsType} from "next";
-import {getUserFromServerSideProps} from "@propelauth/nextjs/server/pages";
-import {User} from "@propelauth/nextjs/client";
+import { GetServerSideProps, InferGetServerSidePropsType } from 'next'
+import { getUserFromServerSideProps } from '@propelauth/nextjs/server/pages'
+import { User } from '@propelauth/nextjs/client'
 
-export default function WelcomeMessage({userJson}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+export default function WelcomeMessage({ userJson }: InferGetServerSidePropsType<typeof getServerSideProps>) {
     // Deserialize the user from the JSON string so you can call functions like user.getOrg()
     const user = User.fromJSON(userJson)
     return <div>Hello, {user.firstName}</div>
@@ -150,24 +151,24 @@ export default function WelcomeMessage({userJson}: InferGetServerSidePropsType<t
 export const getServerSideProps: GetServerSideProps = async (context) => {
     const user = await getUserFromServerSideProps(context)
     if (!user) {
-        return {redirect: {destination: '/api/auth/login', permanent: false}}
+        return { redirect: { destination: '/api/auth/login', permanent: false } }
     }
-    return { props: {userJson: JSON.stringify(user) } }
+    return { props: { userJson: JSON.stringify(user) } }
 }
 ```
 
 ### Get the user in API Routes (Pages example)
 
 ```ts
-import {NextApiRequest, NextApiResponse} from "next";
-import {getUserFromApiRouteRequest} from "@propelauth/nextjs/server/pages";
+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})
+        res.status(200).json({ email: user.email })
     } else {
-        res.status(401).json({error: "unauthorized"})
+        res.status(401).json({ error: 'unauthorized' })
     }
 }
 ```
@@ -175,13 +176,13 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 ### Get the user in Client Components
 
 ```tsx
-"use client";
+'use client'
 
-import {useUser} from "@propelauth/nextjs/client";
+import { useUser } from '@propelauth/nextjs/client'
 
 const WelcomeMessage = () => {
-    const {loading, user} = useUser()
-   
+    const { loading, user } = useUser()
+
     if (loading) {
         return <div>Loading...</div>
     } else if (user) {
@@ -198,23 +199,28 @@ Note that this works on both the client's `User` object or the client/server `Us
 
 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:
+
 - PropelAuth provides UI for users to create organizations and invite other users to join them.
 - Your users can also create Enterprise SSO/SAML connections to their own Identity Providers (IdPs) so their organization members can log in with their existing work credentials.
 - You can create organizations and add users to them via our APIs or our Dashboard.
 
 ```tsx
 // src/app/org/[slug]/page.tsx
-import {getUserOrRedirect} from "@propelauth/nextjs/server/app-router";
+import { getUserOrRedirect } from '@propelauth/nextjs/server/app-router'
 
 export default async function AdminOnlyPage({ params }: { params: { slug: string } }) {
     const user = await getUserOrRedirect()
-    const org = user.getOrgByName(params.slug);
-    const isAdmin = org?.isRole("Admin")
+    const org = user.getOrgByName(params.slug)
+    const isAdmin = org?.isRole('Admin')
 
     if (!isAdmin) {
         return <div>Not found</div>
     } else {
-        return <div>Welcome {user.firstName}, Admin of {org?.orgName}</div>
+        return (
+            <div>
+                Welcome {user.firstName}, Admin of {org?.orgName}
+            </div>
+        )
     }
 }
 ```
@@ -222,9 +228,9 @@ export default async function AdminOnlyPage({ params }: { params: { slug: string
 ### Logging out
 
 ```tsx
-"use client"
+'use client'
 
-import {useLogoutFunction} from "@propelauth/nextjs/client";
+import { useLogoutFunction } from '@propelauth/nextjs/client'
 
 export default function LogoutButton() {
     const logoutFn = useLogoutFunction()
@@ -237,35 +243,39 @@ export default function LogoutButton() {
 If you don't want to use redirect functions, you can also use `useHostedPageUrls` which will return the URLs instead of redirecting.
 
 ```tsx
-"use client"
+'use client'
 
-import {useRedirectFunctions} from "@propelauth/nextjs/client";
+import { useRedirectFunctions } from '@propelauth/nextjs/client'
 
 export default function SignupAndLoginButtons() {
-    const {redirectToSignupPage, redirectToLoginPage} = useRedirectFunctions()
-    return <>
-        <button onClick={redirectToSignupPage}>Sign up</button>
-        <button onClick={redirectToLoginPage}>Log in</button>
-    </>
+    const { redirectToSignupPage, redirectToLoginPage } = useRedirectFunctions()
+    return (
+        <>
+            <button onClick={redirectToSignupPage}>Sign up</button>
+            <button onClick={redirectToLoginPage}>Log in</button>
+        </>
+    )
 }
 ```
 
 ### Redirecting to Account / Org pages
 
-PropelAuth also provides you with pre-built account and organization management UIs. 
+PropelAuth also provides you with pre-built account and organization management UIs.
 You can redirect your users to these pages by using the following functions:
 
 ```tsx
-"use client"
+'use client'
 
-import {useRedirectFunctions} from "@propelauth/nextjs/client";
+import { useRedirectFunctions } from '@propelauth/nextjs/client'
 
 export default function AccountAndOrgButtons() {
-    const {redirectToAccountPage, redirectToOrgPage} = useRedirectFunctions()
-    return <>
-        <button onClick={redirectToAccountPage}>Account</button>
-        <button onClick={redirectToOrgPage}>Organization</button>
-    </>
+    const { redirectToAccountPage, redirectToOrgPage } = useRedirectFunctions()
+    return (
+        <>
+            <button onClick={redirectToAccountPage}>Account</button>
+            <button onClick={redirectToOrgPage}>Organization</button>
+        </>
+    )
 }
 ```
 
@@ -274,7 +284,7 @@ export default function AccountAndOrgButtons() {
 You can use our [APIs](https://docs.propelauth.com/reference/backend-apis/node) like so:
 
 ```ts
-import {getPropelAuthApis} from "@propelauth/nextjs/server";
+import { getPropelAuthApis } from '@propelauth/nextjs/server'
 
 const apis = getPropelAuthApis()
 await apis.disableUser(userId)
@@ -286,13 +296,13 @@ PropelAuth also supports backend that are not Next.js. To make an [authenticated
 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";
+import { useUser } from '@propelauth/nextjs/client'
 
 const MyComponent = () => {
-    const {loading, accessToken} = useUser()
-    
+    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.
+Within the App Router, you can also call `getAccessToken` to get the access token.

package/dist/server/app-router/index.js

@@ -344,7 +344,7 @@ function getAuthUrlOrigin() {
   return getAuthUrl().origin;
 }
 function getAuthUrl() {
-  const authUrl = process.env.NEXT_PUBLIC_AUTH_URL;
+  const authUrl = process.env.PROPELAUTH_AUTH_URL || process.env.NEXT_PUBLIC_AUTH_URL;
   if (!authUrl) {
     throw new Error("NEXT_PUBLIC_AUTH_URL is not set");
   }
@@ -737,8 +737,10 @@ function getRouteHandlers(args) {
           headers: headers2
         });
       } else if (response.status === 401) {
+        const apiKey = getIntegrationApiKey();
+        const firstFourChars = apiKey.substring(0, 4);
         console.error(
-          "Couldn't finish the login process for this user. This is most likely caused by an incorrect PROPELAUTH_API_KEY."
+          `Couldn't finish the login process for this user. This is most likely caused by an incorrect PROPELAUTH_API_KEY. Your API key starts with ${firstFourChars}... double check that that matches the API key in the PropelAuth dashboard for this environment.`
         );
         return new Response("Unexpected error", { status: 500 });
       } else {