Rearrange exports for RSC and add experimental RSC route to example

Author: adamjmcgrath

EXAMPLES.md

@@ -40,7 +40,7 @@ Wrap your `pages/_app.jsx` component in the `UserProvider` component.
 ```jsx
 // pages/_app.jsx
 import React from 'react';
-import { UserProvider } from '@auth0/nextjs-auth0';
+import { UserProvider } from '@auth0/nextjs-auth0/client';
 
 export default function App({ Component, pageProps }) {
   // You can optionally pass the `user` prop from pages that require server-side
@@ -59,7 +59,7 @@ Check the user's authentication state and log them in or out from the front end
 
 ```jsx
 // pages/index.jsx
-import { useUser } from '@auth0/nextjs-auth0';
+import { useUser } from '@auth0/nextjs-auth0/client';
 
 export default () => {
   const { user, error, isLoading } = useUser();
@@ -167,7 +167,7 @@ Requests to `/pages/profile` without a valid session cookie will be redirected t
 
 ```jsx
 // pages/profile.js
-import { withPageAuthRequired } from '@auth0/nextjs-auth0';
+import { withPageAuthRequired } from '@auth0/nextjs-auth0/client';
 
 export default withPageAuthRequired(function Profile({ user }) {
   return <div>Hello {user.name}</div>;
@@ -195,7 +195,7 @@ Then you can access your API from the frontend with a valid session cookie.
 ```jsx
 // pages/products
 import useSWR from 'swr';
-import { withPageAuthRequired } from '@auth0/nextjs-auth0';
+import { withPageAuthRequired } from '@auth0/nextjs-auth0/client';
 
 const fetcher = async (uri) => {
   const response = await fetch(uri);
@@ -221,7 +221,7 @@ To protect all your routes:
 
 ```js
 // middleware.js
-import { withMiddlewareAuthRequired } from '@auth0/nextjs-auth0/middleware';
+import { withMiddlewareAuthRequired } from '@auth0/nextjs-auth0/edge';
 
 export default withMiddlewareAuthRequired();
 ```
@@ -230,7 +230,7 @@ To protect specific routes:
 
 ```js
 // middleware.js
-import { withMiddlewareAuthRequired } from '@auth0/nextjs-auth0/middleware';
+import { withMiddlewareAuthRequired } from '@auth0/nextjs-auth0/edge';
 
 export default withMiddlewareAuthRequired();
 
@@ -245,7 +245,7 @@ To run custom middleware for authenticated users:
 
 ```js
 // middleware.js
-import { withMiddlewareAuthRequired, getSession } from '@auth0/nextjs-auth0/middleware';
+import { withMiddlewareAuthRequired, getSession } from '@auth0/nextjs-auth0/edge';
 
 export default withMiddlewareAuthRequired(async function middleware(req) {
   const res = NextResponse.next();
@@ -262,8 +262,8 @@ For using middleware with your own instance of the SDK:
 import {
   withMiddlewareAuthRequired,
   getSession,
-  initAuth0 // note the mw specific `initAuth0`
-} from '@auth0/nextjs-auth0/middleware';
+  initAuth0 // note the edge runtime specific `initAuth0`
+} from '@auth0/nextjs-auth0/edge';
 
 const auth0 = initAuth0({ ... });
 

README.md

@@ -127,7 +127,7 @@ Wrap your `pages/_app.js` component with the `UserProvider` component:
 ```jsx
 // pages/_app.js
 import React from 'react';
-import { UserProvider } from '@auth0/nextjs-auth0';
+import { UserProvider } from '@auth0/nextjs-auth0/client';
 
 export default function App({ Component, pageProps }) {
   return (
@@ -144,7 +144,7 @@ You can now determine if a user is authenticated by checking that the `user` obj
 
 ```jsx
 // pages/index.js
-import { useUser } from '@auth0/nextjs-auth0';
+import { useUser } from '@auth0/nextjs-auth0/client';
 
 export default function Index() {
   const { user, error, isLoading } = useUser();
@@ -174,30 +174,47 @@ For other comprehensive examples, see the [EXAMPLES.md](./EXAMPLES.md) document.
 
 ### API Reference
 
-- [Configuration Options](https://auth0.github.io/nextjs-auth0/modules/config.html)
+#### Server (for Node.js)
 
-**Server-side methods**:
+`import * from @auth0/nextjs-auth0`
 
+- [Configuration Options and Environment variables](https://auth0.github.io/nextjs-auth0/modules/config.html)
+- [initAuth0](https://auth0.github.io/nextjs-auth0/modules/index.html#initauth0)
 - [handleAuth](https://auth0.github.io/nextjs-auth0/modules/handlers_auth.html)
 - [handleLogin](https://auth0.github.io/nextjs-auth0/modules/handlers_login.html#handlelogin)
 - [handleCallback](https://auth0.github.io/nextjs-auth0/modules/handlers_callback.html)
 - [handleLogout](https://auth0.github.io/nextjs-auth0/modules/handlers_logout.html)
 - [handleProfile](https://auth0.github.io/nextjs-auth0/modules/handlers_profile.html)
 - [withApiAuthRequired](https://auth0.github.io/nextjs-auth0/modules/helpers_with_api_auth_required.html)
 - [withPageAuthRequired](https://auth0.github.io/nextjs-auth0/modules/helpers_with_page_auth_required.html#withpageauthrequired)
-- [withMiddlewareAuthRequired](https://auth0.github.io/nextjs-auth0/modules/helpers_with_middleware_auth_required.html)
 - [getSession](https://auth0.github.io/nextjs-auth0/modules/session_get_session.html)
 - [updateSession](https://auth0.github.io/nextjs-auth0/modules/session_update_session.html)
 - [getAccessToken](https://auth0.github.io/nextjs-auth0/modules/session_get_access_token.html)
-- [initAuth0](https://auth0.github.io/nextjs-auth0/modules/instance.html)
 
-**Client-side methods/components**:
+#### Edge (for Middleware and the Edge runtime)
+
+`import * from @auth0/nextjs-auth0/edge`
+
+- [Configuration Options and Environment variables](https://auth0.github.io/nextjs-auth0/modules/config.html)
+- [initAuth0](https://auth0.github.io/nextjs-auth0/modules/edge.html#initauth0-1)
+- [withMiddlewareAuthRequired](https://auth0.github.io/nextjs-auth0/modules/helpers_with_middleware_auth_required.html)
+- [getSession](https://auth0.github.io/nextjs-auth0/modules/edge.html#getsession-1)
+
+#### Client (for the Browser)
+
+`import * from @auth0/nextjs-auth0/client`
+
+- [UserProvider](https://auth0.github.io/nextjs-auth0/modules/client_use_user.html#userprovider)
+- [useUser](https://auth0.github.io/nextjs-auth0/modules/client_use_user.html)
+- [withPageAuthRequired](https://auth0.github.io/nextjs-auth0/modules/client_with_page_auth_required.html)
+
+#### Testing helpers
+
+`import * from @auth0/nextjs-auth0/testing`
 
-- [UserProvider](https://auth0.github.io/nextjs-auth0/modules/frontend_use_user.html#userprovider)
-- [useUser](https://auth0.github.io/nextjs-auth0/modules/frontend_use_user.html)
-- [withPageAuthRequired](https://auth0.github.io/nextjs-auth0/modules/frontend_with_page_auth_required.html)
+- [generateSessionCookie](https://auth0.github.io/nextjs-auth0/modules/helpers_testing.html#generatesessioncookie)
 
-Visit the auto-generated [API Docs](https://auth0.github.io/nextjs-auth0/) for more details.
+Visit the auto-generated [API Docs](https://auth0.github.io/nextjs-auth0/) for more details
 
 ### Cookies and Security
 

V2_MIGRATION_GUIDE.md

@@ -4,6 +4,7 @@ Guide to migrating from `1.x` to `2.x`
 
 - [Node 10 is no longer supported](#node-10-is-no-longer-supported)
 - [`getSession` now returns a `Promise`](#getsession-now-returns-a-promise)
+- [Client methods and components are now exported under /client](#client-methods-and-components-are-now-exported-under-client)
 - [`updateSession` has been added](#updatesession-has-been-added)
 - [`getServerSidePropsWrapper` has been removed](#getserversidepropswrapper-has-been-removed)
 - [Profile API route no longer returns a 401](#profile-api-route-no-longer-returns-a-401)
@@ -42,6 +43,92 @@ async function myApiRoute(req, res) {
 }
 ```
 
+## Client methods and components are now exported under /client
+
+All methods and components for the browser should now be accessed under `/client`
+
+### Before
+
+```js
+// pages/_app.js
+import React from 'react';
+import { UserProvider } from '@auth0/nextjs-auth0';
+
+export default function App({ Component, pageProps }) {
+  return (
+    <UserProvider>
+      <Component {...pageProps} />
+    </UserProvider>
+  );
+}
+```
+
+```js
+// pages/index.js
+import { useUser } from '@auth0/nextjs-auth0';
+
+export default function Index() {
+  const { user, error, isLoading } = useUser();
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>{error.message}</div>;
+
+  if (user) {
+    return (
+      <div>
+        Welcome {user.name}! <a href="/api/auth/logout">Logout</a>
+      </div>
+    );
+  }
+
+  return <a href="/api/auth/login">Login</a>;
+}
+```
+
+### After
+
+```js
+// pages/_app.js
+import React from 'react';
+import { UserProvider } from '@auth0/nextjs-auth0/client';
+
+export default function App({ Component, pageProps }) {
+  return (
+    <UserProvider>
+      <Component {...pageProps} />
+    </UserProvider>
+  );
+}
+```
+
+```js
+// pages/index.js
+import { useUser, withPageAuthRequired as withPageAuthRequiredCSR } from '@auth0/nextjs-auth0/client';
+// The SSR version of withPageAuthRequired is still in the root export
+import { withPageAuthRequired as withPageAuthRequiredSSR } from '@auth0/nextjs-auth0';
+
+export default withPageAuthRequiredCSR(function Index() {
+  const { user, error, isLoading } = useUser();
+
+  if (isLoading) return <div>Loading...</div>;
+  if (error) return <div>{error.message}</div>;
+
+  if (user) {
+    return (
+      <div>
+        Welcome {user.name}! <a href="/api/auth/logout">Logout</a>
+      </div>
+    );
+  }
+
+  return <a href="/api/auth/login">Login</a>;
+});
+
+export const getServerSideProps = withPageAuthRequiredSSR();
+```
+
+### Before
+
 ## `updateSession` has been added
 
 ### Before

client.d.ts

@@ -0,0 +1 @@
+export type * from './dist/client';

client.js

@@ -0,0 +1 @@
+module.exports = require('./dist/client');

edge.d.ts

@@ -0,0 +1 @@
+export type * from './dist/edge';

edge.js

@@ -0,0 +1 @@
+module.exports = require('./dist/edge');

examples/basic-example/components/header.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Link from 'next/link';
-import { useUser } from '@auth0/nextjs-auth0';
+import { useUser } from '@auth0/nextjs-auth0/client';
 
 const Header = () => {
   const { user } = useUser();

examples/basic-example/pages/_app.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UserProvider } from '@auth0/nextjs-auth0';
+import { UserProvider } from '@auth0/nextjs-auth0/client';
 
 export default function App({ Component, pageProps }) {
   // If you've used `withAuth`, pageProps.user can pre-populate the hook

examples/basic-example/pages/index.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useUser } from '@auth0/nextjs-auth0';
+import { useUser } from '@auth0/nextjs-auth0/client';
 
 import Layout from '../components/layout';
 

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { useUser, withPageAuthRequired } from '@auth0/nextjs-auth0';
+import { withPageAuthRequired } from '@auth0/nextjs-auth0';
+import { useUser } from '@auth0/nextjs-auth0/client';
 
 import Layout from '../components/layout';
 

examples/kitchen-sink-example/.eslintrc

@@ -5,8 +5,7 @@
     "eslint:recommended",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:import/recommended",
-    "plugin:react/recommended",
+    "plugin:@next/next/recommended",
     "plugin:prettier/recommended"
   ],
   "settings": {

examples/kitchen-sink-example/app/global.css

@@ -0,0 +1,9 @@
+body {
+    margin: 0;
+    color: #333;
+    font-family: -apple-system, 'Segoe UI';
+}
+.container {
+    max-width: 42rem;
+    margin: 1.5rem auto;
+}

examples/kitchen-sink-example/app/head.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Head() {
+  return (
+    <>
+      <title>Next.js with Auth0</title>
+    </>
+  );
+}

examples/kitchen-sink-example/app/layout.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import './global.css';
+import Header from '../components/header';
+import { UserProvider } from '@auth0/nextjs-auth0/client';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <UserProvider>
+        <body>
+          <Header />
+          <div className="container">{children}</div>
+        </body>
+      </UserProvider>
+    </html>
+  );
+}

examples/kitchen-sink-example/app/profile-experimental-rsc/page.tsx

@@ -0,0 +1,32 @@
+import { headers } from 'next/headers';
+import { getSession as auth0GetSession } from '@auth0/nextjs-auth0';
+import { IncomingMessage, ServerResponse } from 'http';
+import { Socket } from 'net';
+
+// Note: This is an experiment to test that the SDK works in the experimental app directory.
+// You should not rely on this code (or the app directory) in production.
+const reqRes = () => {
+  const req = new IncomingMessage(new Socket());
+  headers().forEach((v, k) => {
+    req.headers[k] = v;
+  });
+  const res = new ServerResponse(req);
+  return { req, res };
+};
+
+export function getSession() {
+  const { req, res } = reqRes();
+  return auth0GetSession(req, res);
+}
+
+export default async function ExperimentalRscPage() {
+  const session = await getSession();
+  // const session = {};
+  return (
+    <div>
+      <h1>Profile</h1>
+      <h4>Profile</h4>
+      <pre>{JSON.stringify(session || {}, null, 2)}</pre>
+    </div>
+  );
+}