Profile (fetched from API)
+User
+{JSON.stringify(user, null, 2)}
+ {JSON.stringify(user, null, 2)};
+ }
+ return <>;
+}
diff --git a/example-app/app/edge-profile-api/page.tsx b/example-app/app/edge-profile-api/page.tsx
new file mode 100644
index 000000000..c0c5d9596
--- /dev/null
+++ b/example-app/app/edge-profile-api/page.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { withPageAuthRequired } from '@auth0/nextjs-auth0/client';
+
+export default withPageAuthRequired(function ProfileApi() {
+ const [user, setUser] = useState();
+
+ useEffect(() => {
+ (async () => {
+ const res = await fetch(`${window.location.origin}/api/edge-profile`);
+ setUser(await res.json());
+ })();
+ }, []);
+
+ return (
+ {JSON.stringify(user, null, 2)}
+ {JSON.stringify({ accessToken: session?.accessToken }, null, 2)}
+ {JSON.stringify(session?.user, null, 2)}
+ {JSON.stringify(user, null, 2)}
+ {JSON.stringify({ accessToken: session?.accessToken }, null, 2)}
+ {JSON.stringify(session?.user, null, 2)}
+ {JSON.stringify({ accessToken: session?.accessToken }, null, 2)}
+ {JSON.stringify(session?.user, null, 2)}
+ {JSON.stringify(accessToken, null, 2)}
+ {JSON.stringify(session.user, null, 2)}
+
+ );
+ }
+ return <>;
+}
diff --git a/example-app/components/header.tsx b/example-app/components/header.tsx
new file mode 100644
index 000000000..988a5cac2
--- /dev/null
+++ b/example-app/components/header.tsx
@@ -0,0 +1,126 @@
+import React from 'react';
+import Link from 'next/link';
+import { useUser } from '@auth0/nextjs-auth0/client';
+import { useRouter } from 'next/router';
+
+const Header = (): React.ReactElement => {
+ const { user } = useUser();
+ const { pathname } = useRouter();
+ const pageName = pathname.split('/').pop();
+
+ return (
+ <>
+ {JSON.stringify(user, null, 2)}
+ Loading...
; + } + return ( +{JSON.stringify(user, null, 2)}
+ {JSON.stringify(user, null, 2)}
{JSON.stringify(user, null, 2)}
+ Loading login info...
} - - {error && ( - <> -{error.message}
-
- )}
-
- {user && (
- <>
- {JSON.stringify(user, null, 2)}
-
- )}
-
- {!isLoading && !error && !user && (
- <>
- - To test the login click in Login -
-- Once you have logged in you should be able to click in Protected Page and Logout -
- - )} -Loading profile...
} - - {error && ( - <> -{error.message}
-
- )}
-
- {user && (
- <>
- {JSON.stringify(user, null, 2)}
-
- )}
- {JSON.stringify(session || {}, null, 2)}
- - This is the about page, navigating between this page and Home is always pretty fast. However, when you - navigate to the Profile page it takes more time because it uses SSR to fetch the user first; -
-Loading login info...
} - - {error && ( - <> -{error.message}
-
- )}
-
- {user && (
- <>
- {JSON.stringify(user, null, 2)}
-
- )}
-
- {!isLoading && !error && !user && (
- <>
- - To test the login click in Login -
-- Once you have logged in you should be able to click in Protected Page and Logout -
- - )} -{JSON.stringify(user, null, 2)}
- {JSON.stringify(user, null, 2)}
- Loading TV shows...
} - - {response && ( - <> -My favourite TV shows:
-
- {JSON.stringify(
- response.shows.map((s: TVShow) => s.show.name),
- null,
- 2
- )}
-
-
- )}
-
- {error && (
- <>
- Error loading TV shows
-{JSON.stringify(error, null, 2)}
-
- )}
- ( +export type WithPageAuthRequired =
( Component: ComponentType
, options?: WithPageAuthRequiredOptions ) => React.FC
;
diff --git a/src/config.ts b/src/config.ts
index 45e1d24f5..2bd873b43 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,6 +1,4 @@
-import { IncomingMessage } from 'http';
-import type { AuthorizationParameters as OidcAuthorizationParameters } from 'openid-client';
-import type { LoginOptions } from './auth0-session/config';
+import type { LoginOptions, AuthorizationParameters as OidcAuthorizationParameters } from './auth0-session/config';
import { SessionStore } from './auth0-session/session/stateful-session';
import Session from './session/session';
import { DeepPartial, get as getBaseConfig } from './auth0-session/get-config';
@@ -113,7 +111,7 @@ export interface BaseConfig {
* ```js
* {
* ...
- * getLoginState(req, options) {
+ * getLoginState(options) {
* return {
* returnTo: options.returnTo || req.originalUrl,
* customState: 'foo'
@@ -122,7 +120,7 @@ export interface BaseConfig {
* }
* ```
*/
- getLoginState: (req: IncomingMessage, options: LoginOptions) => Record = GetServerSidePropsRes
* @category Server
*/
export type PageRoute
+ ctx: GetServerSidePropsContext
) => Promise
Protected content;
+ * }, { returnTo: '/protected-page' });
+ * ```
+ *
+ * If the user visits `/protected-page` without a valid session, it will redirect the user to the
+ * login page.
+ *
+ * Note: Server Components are not aware of the req or the url of the page. So if you want the user to return to the
+ * page after login, you must specify the `returnTo` option.
+ *
+ * You can specify a function to `returnTo` that accepts the `params` (An object containing the dynamic
+ * route parameters) and `searchParams` (An object containing the search parameters of the current URL)
+ * argument from the page, to preserve dynamic routes and search params.
+ *
+ * ```js
+ * // app/protected-page/[slug]/page.js
+ * import { withPageAuthRequired } from '@auth0/nextjs-auth0';
+ *
+ * export default function withPageAuthRequired(ProtectedPage() {
+ * return Protected content;
+ * }, {
+ * returnTo({ params }) {
+ * return `/protected-page/${params.slug}`
+ * }
+ * });
+ * ```
+ *
+ * @category Server
+ */
+export type WithPageAuthRequiredAppRouter = (
+ fn: AppRouterPageRoute,
+ opts?: WithPageAuthRequiredAppRouterOptions
+) => AppRouterPageRoute;
+
+/**
+ * Protects Page router pages {@link WithPageAuthRequiredPageRouter} or
+ * App router pages {@link WithPageAuthRequiredAppRouter}
+ *
+ * @category Server
+ */
+export type WithPageAuthRequired = WithPageAuthRequiredPageRouter & WithPageAuthRequiredAppRouter;
+
/**
* @ignore
*/
@@ -104,26 +184,60 @@ export default function withPageAuthRequiredFactory(
loginUrl: string,
getSessionCache: () => SessionCache
): WithPageAuthRequired {
- return ({ getServerSideProps, returnTo } = {}) =>
- async (ctx) => {
- assertCtx(ctx);
- const sessionCache = getSessionCache();
- const session = await sessionCache.get(ctx.req, ctx.res);
- if (!session?.user) {
- return {
- redirect: {
- destination: `${loginUrl}?returnTo=${encodeURIComponent(returnTo || ctx.resolvedUrl)}`,
- permanent: false
- }
- };
- }
- let ret: any = { props: {} };
- if (getServerSideProps) {
- ret = await getServerSideProps(ctx);
- }
- if (ret.props instanceof Promise) {
- return { ...ret, props: ret.props.then((props: any) => ({ user: session.user, ...props })) };
- }
- return { ...ret, props: { user: session.user, ...ret.props } };
- };
+ const appRouteHandler = appRouteHandlerFactory(loginUrl, getSessionCache);
+ const pageRouteHandler = pageRouteHandlerFactory(loginUrl, getSessionCache);
+
+ return ((
+ fnOrOpts?: WithPageAuthRequiredPageRouterOptions | AppRouterPageRoute,
+ opts?: WithPageAuthRequiredAppRouterOptions
+ ) => {
+ if (typeof fnOrOpts === 'function') {
+ return appRouteHandler(fnOrOpts, opts);
+ }
+ return pageRouteHandler(fnOrOpts);
+ }) as WithPageAuthRequired;
}
+
+/**
+ * @ignore
+ */
+const appRouteHandlerFactory =
+ (loginUrl: string, getSessionCache: () => SessionCache): WithPageAuthRequiredAppRouter =>
+ (handler, opts = {}) =>
+ async (params) => {
+ const sessionCache = getSessionCache();
+ const [session] = await get({ sessionCache });
+ if (!session?.user) {
+ const returnTo = typeof opts.returnTo === 'function' ? await opts.returnTo(params) : opts.returnTo;
+ redirect(`${loginUrl}${opts.returnTo ? `?returnTo=${returnTo}` : ''}`);
+ }
+ return handler(params);
+ };
+
+/**
+ * @ignore
+ */
+const pageRouteHandlerFactory =
+ (loginUrl: string, getSessionCache: () => SessionCache): WithPageAuthRequiredPageRouter =>
+ ({ getServerSideProps, returnTo } = {}) =>
+ async (ctx) => {
+ assertCtx(ctx);
+ const sessionCache = getSessionCache();
+ const session = await sessionCache.get(ctx.req, ctx.res);
+ if (!session?.user) {
+ return {
+ redirect: {
+ destination: `${loginUrl}?returnTo=${encodeURIComponent(returnTo || ctx.resolvedUrl)}`,
+ permanent: false
+ }
+ };
+ }
+ let ret: any = { props: {} };
+ if (getServerSideProps) {
+ ret = await getServerSideProps(ctx);
+ }
+ if (ret.props instanceof Promise) {
+ return { ...ret, props: ret.props.then((props: any) => ({ user: session.user, ...props })) };
+ }
+ return { ...ret, props: { user: session.user, ...ret.props } };
+ };
diff --git a/src/http/auth0-next-api-request.ts b/src/http/auth0-next-api-request.ts
new file mode 100644
index 000000000..6814cb319
--- /dev/null
+++ b/src/http/auth0-next-api-request.ts
@@ -0,0 +1,22 @@
+import { Auth0Request } from '../auth0-session/http';
+import { NextApiRequest } from 'next';
+
+export default class Auth0NextApiRequest extends Auth0Request