PropelAuth Next.js (v13+) Library
PropelAuth is a user management and authentication service for your B2B/multi-tenant applications.
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.
Installation
npm install @propelauth/nextjs
Setup
Before you start, make sure you have a PropelAuth account. You can sign up for free at here.
You'll need to set the following .env variables in your Next.js application:
- NEXT_PUBLIC_AUTH_URL
- PROPELAUTH_API_KEY
- PROPELAUTH_VERIFIER_KEY
- PROPELAUTH_REDIRECT_URI
You can find the NEXT_PUBLIC_AUTH_URL, PROPELAUTH_API_KEY, and PROPELAUTH_VERIFIER_KEY variables for your application in the PropelAuth Dashboard under Backend Integration.
When you copy the PROPELAUTH_VERIFIER_KEY from the PropelAuth dashboard, it will automatically paste into your .env file with line breaks. However, due to the way some systems interpret multiline environment variables, you will need to edit the verifier key value to include ‘\n’ instead of newline characters. For example:
PROPELAUTH_VERIFIER_KEY=-----BEGIN PUBLIC KEY-----\nMIIBIjANBgk...
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:
import {getRouteHandlers} from "@propelauth/nextjs/server/app-router";
import {User} from "@propelauth/nextjs/server";
import {NextRequest} from "next/server";
const routeHandlers = getRouteHandlers({
postLoginRedirectPathFn: (req: NextRequest) => {
return "/"
}
})
export const GET = routeHandlers.getRouteHandler
export const POST = routeHandlers.postRouteHandler
2. Set up AuthProvider
AppRouter Version
In your root layout, src/app/layout.tsx
, add the AuthProvider
:
export default async function RootLayout({children}: {children: React.ReactNode}) {
return (
<html lang="en">
<AuthProvider authUrl={process.env.NEXT_PUBLIC_AUTH_URL}>
<body className={inter.className}>{children}</body>
</AuthProvider>
</html>
)
}
Pages Version
In your _app.tsx
file, add the AuthProvider
:
export default function MyApp({Component, pageProps}: AppProps) {
return (
<AuthProvider authUrl={process.env.NEXT_PUBLIC_AUTH_URL}>
<Component {...pageProps} />
</AuthProvider>
)
}
3. Set up middleware (AppRouter only - skip if using Pages)
In your src/middleware.ts
file, add the following:
import {authMiddleware} from "@propelauth/nextjs/server/app-router";
export const middleware = authMiddleware
export const config = {
matcher: [
'/api/auth/(.*)',
'/((?!_next/static|_next/image|favicon.ico).*)',
],
}
Usage
Get the user in Server Components (AppRouter example)
import {getUser} from "@propelauth/nextjs/server/app-router";
const WelcomeMessage = async () => {
const user = await getUser()
if (user) {
return <div>Hello {user.firstName}!</div>
} else {
return <div>Please log in to be welcomed</div>
}
}
import {getUser} from "@propelauth/nextjs/server/app-router";
const WelcomeMessage = async () => {
const user = await getUserOrRedirect()
return <div>Hello {user.firstName}!</div>
}
Get the user in getServerSideProps (Pages example)
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>) {
const user = User.fromJSON(userJson)
return <div>Hello, {user.firstName}</div>
}
export const getServerSideProps: GetServerSideProps = async (context) => {
const user = await getUserFromServerSideProps(context)
if (!user) {
return {redirect: {destination: '/api/auth/login', permanent: false}}
}
return { props: {userJson: JSON.stringify(user) } }
}
Get the user in Client Components
"use client";
import {useUser} from "@propelauth/nextjs/client";
const WelcomeMessage = () => {
const {loading, user} = useUser()
if (loading) {
return <div>Loading...</div>
} else if (user) {
return <div>Hello {user.firstName}!</div>
} else {
return <div>Please log in to be welcomed</div>
}
}
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.
If you are curious where the organization information comes from, check out our documentation on organizations.
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.
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")
if (!isAdmin) {
return <div>Not found</div>
} else {
return <div>Welcome {user.firstName}, Admin of {org?.orgName}</div>
}
}
Logging out
"use client"
import {useLogoutFunction} from "@propelauth/nextjs/client";
export default function LogoutButton() {
const logoutFn = useLogoutFunction()
return <button onClick={logoutFn}>Logout</button>
}
Logging in / Signing up
If you don't want to use redirect functions, you can also use useHostedPageUrls
which will return the URLs instead of redirecting.
"use 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>
</>
}
Redirecting to Account / Org pages
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:
"use 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>
</>
}