Merge pull request #187 from auth0/feature/frontend-hook

Add frontend hook
auth0 · Nov 2, 2020 · 50d7a1b · 50d7a1b
2 parents 3c20e20 + 5592ca5
commit 50d7a1b
Show file tree

Hide file tree

Showing 43 changed files with 285 additions and 7,473 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -11,6 +11,7 @@
   ],
   "env": {
     "node": true,
+    "browser": true,
     "jest": true
   },
   "settings": {

diff --git a/examples/api-call-example/components/header.jsx b/examples/api-call-example/components/header.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import Link from 'next/link';
-
-import { useUser } from '../lib/user';
+import { useUser } from '@auth0/nextjs-auth0';
 
 const Header = () => {
   const { user, loading } = useUser();

diff --git a/examples/api-call-example/components/layout.jsx b/examples/api-call-example/components/layout.jsx
@@ -2,10 +2,9 @@ import React from 'react';
 import Head from 'next/head';
 
 import Header from './header';
-import { UserProvider } from '../lib/user';
 
-const Layout = ({ user, loading = false, children }) => (
-  <UserProvider value={{ user, loading }}>
+const Layout = ({ children }) => (
+  <>
     <Head>
       <title>Next.js with Auth0</title>
     </Head>
@@ -29,7 +28,7 @@ const Layout = ({ user, loading = false, children }) => (
         font-family: -apple-system, 'Segoe UI';
       }
     `}</style>
-  </UserProvider>
+  </>
 );
 
 export default Layout;
diff --git a/examples/api-call-example/components/with-auth.jsx b/examples/api-call-example/components/with-auth.jsx
@@ -1,42 +1,42 @@
-import React, { Component } from 'react';
+import React from 'react';
+import { useUser } from '@auth0/nextjs-auth0';
 
 import auth0 from '../lib/auth0';
-import { fetchUser } from '../lib/user';
 import createLoginUrl from '../lib/url-helper';
 import RedirectToLogin from '../components/login-redirect';
 
 export default function withAuth(InnerComponent) {
-  return class Authenticated extends Component {
-    static async getInitialProps(ctx) {
-      if (!ctx.req) {
-        const user = await fetchUser();
-        return {
-          user
-        };
-      }
-
-      const session = await auth0.getSession(ctx.req, ctx.res);
-      if (!session || !session.user) {
-        ctx.res.writeHead(302, {
-          Location: createLoginUrl(ctx.req.url)
-        });
-        ctx.res.end();
-        return;
-      }
-
-      return { user: session.user };
+  const Authenticated = (props) => {
+    const { user } = useUser();
+
+    if (!user) {
+      return <RedirectToLogin />; // do you need a "redirecting to login" route?
     }
 
-    constructor(props) {
-      super(props);
+    return <InnerComponent {...props} user={user} />;
+  };
+
+  Authenticated.getInitialProps = async (ctx) => {
+    if (!ctx.req) {
+      const response = await fetch('/api/me');
+      const result = response.ok ? await response.json() : null;
+
+      return { user: result };
     }
 
-    render() {
-      if (!this.props.user) {
-        return <RedirectToLogin />;
-      }
+    const session = await auth0.getSession(ctx.req, ctx.res);
 
-      return <div>{<InnerComponent {...this.props} user={this.props.user} />}</div>;
+    if (!session || !session.user) {
+      ctx.res.writeHead(302, {
+        Location: createLoginUrl(ctx.req.url)
+      });
+      ctx.res.end();
+
+      return;
     }
+
+    return { user: session.user };
   };
+
+  return Authenticated;
 }
diff --git a/examples/api-call-example/lib/user.jsx b/examples/api-call-example/lib/user.jsx
diff --git a/examples/api-call-example/pages/_app.jsx b/examples/api-call-example/pages/_app.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { UserProvider } from '@auth0/nextjs-auth0';
+
+export default function App({ Component, pageProps }) {
+  // If you've used `withAuth`, pageProps.user can pre-populate the hook
+  // if you haven't used `withAuth`, pageProps.user is undefined so the hook
+  // fetches the user from the API routes
+  const { user, ...otherProps } = pageProps;
+
+  return (
+    <UserProvider user={user}>
+      <Component {...otherProps} />
+    </UserProvider>
+  );
+}
diff --git a/examples/api-call-example/pages/about.jsx b/examples/api-call-example/pages/about.jsx
@@ -1,13 +1,10 @@
 import React from 'react';
 
 import Layout from '../components/layout';
-import { useFetchUser } from '../lib/user';
 
 export default function About() {
-  const { user, loading } = useFetchUser();
-
   return (
-    <Layout user={user} loading={loading}>
+    <Layout>
       <h1>About</h1>
       <p>
         This is the about page, navigating between this page and <i>Home</i> is always pretty fast. However, when you

diff --git a/examples/api-call-example/pages/index.jsx b/examples/api-call-example/pages/index.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
+import { useUser } from '@auth0/nextjs-auth0';
 
 import Layout from '../components/layout';
-import { useFetchUser } from '../lib/user';
 
 export default function Home() {
-  const { user, loading } = useFetchUser();
+  const { user, loading } = useUser();
 
   return (
-    <Layout user={user} loading={loading}>
+    <Layout>
       <h1>Next.js and Auth0 Example</h1>
 
       {loading && <p>Loading login info...</p>}

diff --git a/examples/api-call-example/pages/profile-ssr.jsx b/examples/api-call-example/pages/profile-ssr.jsx
@@ -4,7 +4,7 @@ import Layout from '../components/layout';
 import withAuth from '../components/with-auth';
 
 const Profile = ({ user }) => (
-  <Layout user={user}>
+  <Layout>
     <h1>Profile</h1>
 
     <div>

diff --git a/examples/api-call-example/pages/profile.jsx b/examples/api-call-example/pages/profile.jsx
@@ -1,13 +1,13 @@
 import React from 'react';
+import { useUser } from '@auth0/nextjs-auth0';
 
 import Layout from '../components/layout';
-import { useFetchUser } from '../lib/user';
 
 export default function Profile() {
-  const { user, loading } = useFetchUser();
+  const { user, loading } = useUser();
 
   return (
-    <Layout user={user} loading={loading}>
+    <Layout>
       <h1>Profile</h1>
 
       {loading && <p>Loading profile...</p>}

diff --git a/examples/api-call-example/pages/protected-page.jsx b/examples/api-call-example/pages/protected-page.jsx
@@ -1,14 +1,14 @@
 import React from 'react';
+import { useUser } from '@auth0/nextjs-auth0';
 
 import Layout from '../components/layout';
-import { useFetchUser } from '../lib/user';
 import withAuth from '../components/with-auth';
 
 export function ProtectedPage() {
-  const { user, loading } = useFetchUser();
+  const { user, loading } = useUser();
 
   return (
-    <Layout user={user} loading={loading}>
+    <Layout>
       <h1>Protected Page</h1>
 
       {loading && <p>Loading profile...</p>}

diff --git a/examples/api-call-example/pages/shows.jsx b/examples/api-call-example/pages/shows.jsx
@@ -2,14 +2,12 @@ import React from 'react';
 
 import useApi from '../lib/use-api';
 import Layout from '../components/layout';
-import { useFetchUser } from '../lib/user';
 
 export default function TvShows() {
-  const { user, loading } = useFetchUser();
   const { response, error, isLoading } = useApi('/api/shows');
 
   return (
-    <Layout user={user} loading={loading}>
+    <Layout>
       <h1>TV Shows</h1>
 
       {isLoading && <p>Loading TV shows...</p>}

diff --git a/examples/basic-example/.npmrc b/examples/basic-example/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/examples/basic-example/components/header.jsx b/examples/basic-example/components/header.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import Link from 'next/link';
-
-import { useUser } from '../lib/user';
+import { useUser } from '@auth0/nextjs-auth0';
 
 const Header = () => {
   const { user, loading } = useUser();

diff --git a/examples/basic-example/components/layout.jsx b/examples/basic-example/components/layout.jsx
@@ -2,10 +2,9 @@ import React from 'react';
 import Head from 'next/head';
 
 import Header from './header';
-import { UserProvider } from '../lib/user';
 
-const Layout = ({ user, loading = false, children }) => (
-  <UserProvider value={{ user, loading }}>
+const Layout = ({ children }) => (
+  <>
     <Head>
       <title>Next.js with Auth0</title>
     </Head>
@@ -29,7 +28,7 @@ const Layout = ({ user, loading = false, children }) => (
         font-family: -apple-system, 'Segoe UI';
       }
     `}</style>
-  </UserProvider>
+  </>
 );
 
 export default Layout;
diff --git a/examples/basic-example/components/with-auth.jsx b/examples/basic-example/components/with-auth.jsx
@@ -1,42 +1,42 @@
-import React, { Component } from 'react';
+import React from 'react';
+import { useUser } from '@auth0/nextjs-auth0';
 
 import auth0 from '../lib/auth0';
-import { fetchUser } from '../lib/user';
 import createLoginUrl from '../lib/url-helper';
 import RedirectToLogin from '../components/login-redirect';
 
 export default function withAuth(InnerComponent) {
-  return class Authenticated extends Component {
-    static async getInitialProps(ctx) {
-      if (!ctx.req) {
-        const user = await fetchUser();
-        return {
-          user
-        };
-      }
-
-      const session = await auth0.getSession(ctx.req, ctx.res);
-      if (!session || !session.user) {
-        ctx.res.writeHead(302, {
-          Location: createLoginUrl(ctx.req.url)
-        });
-        ctx.res.end();
-        return;
-      }
-
-      return { user: session.user };
+  const Authenticated = (props) => {
+    const { user } = useUser();
+
+    if (!user) {
+      return <RedirectToLogin />; // do you need a "redirecting to login" route?
     }
 
-    constructor(props) {
-      super(props);
+    return <InnerComponent {...props} user={user} />;
+  };
+
+  Authenticated.getInitialProps = async (ctx) => {
+    if (!ctx.req) {
+      const response = await fetch('/api/me');
+      const result = response.ok ? await response.json() : null;
+
+      return { user: result };
     }
 
-    render() {
-      if (!this.props.user) {
-        return <RedirectToLogin />;
-      }
+    const session = await auth0.getSession(ctx.req, ctx.res);
 
-      return <div>{<InnerComponent {...this.props} user={this.props.user} />}</div>;
+    if (!session || !session.user) {
+      ctx.res.writeHead(302, {
+        Location: createLoginUrl(ctx.req.url)
+      });
+      ctx.res.end();
+
+      return;
     }
+
+    return { user: session.user };
   };
+
+  return Authenticated;
 }