Add withAuth HOC [SDK-2120]

examples/api-call-example/components/login-redirect.jsx

@@ -1,19 +1,11 @@
-import Router from 'next/router';
-import React, { Component } from 'react';
+import React from 'react';
 
-import Layout from '../components/layout';
-import createLoginUrl from '../lib/url-helper';
+import Layout from './layout';
 
-export default class RedirectToLogin extends Component {
-  componentDidMount() {
-    window.location.assign(createLoginUrl(Router.pathname));
-  }
+const LoginRedirect = () => (
+  <Layout>
+    <div>Signing you in...</div>
+  </Layout>
+);
 
-  render() {
-    return (
-      <Layout>
-        <div>Signing you in...</div>
-      </Layout>
-    );
-  }
-}
+export default LoginRedirect;

examples/api-call-example/pages/profile-ssr.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
+import { withAuth } from '@auth0/nextjs-auth0';
 
 import Layout from '../components/layout';
-import withAuth from '../components/with-auth';
+import LoginRedirect from '../components/login-redirect';
+import auth0 from '../lib/auth0';
 
 const Profile = ({ user }) => (
   <Layout>
@@ -14,4 +16,4 @@ const Profile = ({ user }) => (
   </Layout>
 );
 
-export default withAuth(Profile);
+export default withAuth(Profile, LoginRedirect, auth0);

examples/api-call-example/pages/protected-page.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { useUser } from '@auth0/nextjs-auth0';
+import { useUser, withAuth } from '@auth0/nextjs-auth0';
 
 import Layout from '../components/layout';
-import withAuth from '../components/with-auth';
+import LoginRedirect from '../components/login-redirect';
+import auth0 from '../lib/auth0';
 
 export function ProtectedPage() {
   const { user, loading } = useUser();
@@ -23,4 +24,4 @@ export function ProtectedPage() {
   );
 }
 
-export default withAuth(ProtectedPage);
+export default withAuth(ProtectedPage, LoginRedirect, auth0);

examples/basic-example/components/login-redirect.jsx

@@ -1,19 +1,11 @@
-import Router from 'next/router';
-import React, { Component } from 'react';
+import React from 'react';
 
-import Layout from '../components/layout';
-import createLoginUrl from '../lib/url-helper';
+import Layout from './layout';
 
-export default class RedirectToLogin extends Component {
-  componentDidMount() {
-    window.location.assign(createLoginUrl(Router.pathname));
-  }
+const LoginRedirect = () => (
+  <Layout>
+    <div>Signing you in...</div>
+  </Layout>
+);
 
-  render() {
-    return (
-      <Layout>
-        <div>Signing you in...</div>
-      </Layout>
-    );
-  }
-}
+export default LoginRedirect;

examples/basic-example/pages/profile-ssr.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
+import { withAuth } from '@auth0/nextjs-auth0';
 
 import Layout from '../components/layout';
-import withAuth from '../components/with-auth';
+import LoginRedirect from '../components/login-redirect';
+import auth0 from '../lib/auth0';
 
 const Profile = ({ user }) => (
   <Layout>
@@ -14,4 +16,4 @@ const Profile = ({ user }) => (
   </Layout>
 );
 
-export default withAuth(Profile);
+export default withAuth(Profile, LoginRedirect, auth0);

examples/basic-example/pages/protected-page.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { useUser } from '@auth0/nextjs-auth0';
+import { useUser, withAuth } from '@auth0/nextjs-auth0';
 
 import Layout from '../components/layout';
-import withAuth from '../components/with-auth';
+import LoginRedirect from '../components/login-redirect';
+import auth0 from '../lib/auth0';
 
 export function ProtectedPage() {
   const { user, loading } = useUser();
@@ -23,4 +24,4 @@ export function ProtectedPage() {
   );
 }
 
-export default withAuth(ProtectedPage);
+export default withAuth(ProtectedPage, LoginRedirect, auth0);

examples/typescript-example/components/layout.tsx

@@ -3,7 +3,7 @@ import Head from 'next/head';
 
 import Header from './header';
 
-type LayoutProps = React.PropsWithChildren<void>;
+type LayoutProps = React.PropsWithChildren<{}>;
 
 const Layout: React.FunctionComponent<LayoutProps> = ({ children }: LayoutProps) => (
   <>

examples/typescript-example/components/login-redirect.tsx

@@ -1,19 +1,11 @@
-import Router from 'next/router';
-import React, { Component } from 'react';
+import React from 'react';
 
-import Layout from '../components/layout';
-import createLoginUrl from '../lib/url-helper';
+import Layout from './layout';
 
-export default class RedirectToLogin extends Component {
-  componentDidMount(): void {
-    window.location.assign(createLoginUrl(Router.pathname));
-  }
+const LoginRedirect = (): React.ReactElement => (
+  <Layout>
+    <div>Signing you in...</div>
+  </Layout>
+);
 
-  render(): React.ReactElement {
-    return (
-      <Layout>
-        <div>Signing you in...</div>
-      </Layout>
-    );
-  }
-}
+export default LoginRedirect;

examples/typescript-example/pages/profile-ssr.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { UserProfile } from '@auth0/nextjs-auth0';
+import { UserProfile, withAuth } from '@auth0/nextjs-auth0';
 
 import Layout from '../components/layout';
-import withAuth from '../components/with-auth';
+import LoginRedirect from '../components/login-redirect';
+import auth0 from '../lib/auth0';
 
 type ProfileProps = { user: UserProfile };
 
@@ -17,4 +18,4 @@ const Profile = ({ user }: ProfileProps): React.ReactElement => (
   </Layout>
 );
 
-export default withAuth(Profile);
+export default withAuth(Profile, LoginRedirect, auth0);

examples/typescript-example/pages/protected-page.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { useUser } from '@auth0/nextjs-auth0';
+import { useUser, withAuth } from '@auth0/nextjs-auth0';
 
 import Layout from '../components/layout';
-import withAuth from '../components/with-auth';
+import LoginRedirect from '../components/login-redirect';
+import auth0 from '../lib/auth0';
 
 export function ProtectedPage(): React.ReactElement {
   const { user, loading } = useUser();
@@ -23,4 +24,4 @@ export function ProtectedPage(): React.ReactElement {
   );
 }
 
-export default withAuth(ProtectedPage);
+export default withAuth(ProtectedPage, LoginRedirect, auth0);

src/handlers/login.ts

@@ -1,6 +1,6 @@
 import { NextApiResponse, NextApiRequest } from 'next';
 import { ClientFactory, Config, loginHandler as getLoginHandler, LoginOptions } from '../auth0-session';
-import isSafeRedirect from '../utils/url-helpers';
+import { isSafeRedirect } from '../utils/url-helpers';
 import TransientCookieHandler from '../auth0-session/transient-handler';
 
 export default function loginHandler(

src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as UserProvider, UserProfile, UserContext, useUser } from './use-user';
+export { default as withAuth } from './with-auth';

src/hooks/use-user.tsx

@@ -11,23 +11,25 @@ export interface UserProfile {
   [key: string]: unknown; // Any custom claim which could be in the profile
 }
 
+export type NullableUserProfile = UserProfile | null;
+
 export interface UserContext {
-  user: UserProfile | null;
+  user: NullableUserProfile;
   loading: boolean;
 }
 
-type UserProviderProps = React.PropsWithChildren<{ user: UserProfile | null }>;
-
 const User = createContext<UserContext>({ user: null, loading: false });
 
 export const useUser = (): UserContext => useContext<UserContext>(User);
 
+type UserProviderProps = React.PropsWithChildren<{ user: NullableUserProfile }>;
+
 export default ({ children, user: initialUser }: UserProviderProps): ReactElement<UserContext> => {
-  const [user, setUser] = useState<UserProfile | null>(() => initialUser); // if used withAuth, initialUser is populated
+  const [user, setUser] = useState<NullableUserProfile>(() => initialUser); // with withAuth, initialUser gets populated
   const [loading, setLoading] = useState<boolean>(() => !initialUser); // if initialUser is populated, no loading needed
 
   useEffect((): void => {
-    if (user) return; // if initialUser is populated, no loading required
+    if (user) return; // if initialUser is populated, no loading needed
 
     (async (): Promise<void> => {
       const response = await fetch('/api/me');