From 380afbfba2a277ed19bc69a608cf5053c44cdcf7 Mon Sep 17 00:00:00 2001 From: Lee Robinson Date: Thu, 31 Dec 2020 02:28:11 -0600 Subject: [PATCH] Add docs on authentication patterns. (#16277) Building off [this Slack conversation](https://vercel.slack.com/archives/CGD3XGSD7/p1597329727013900), this PR adds a top-level section to the documentation on authentication patterns. Please provide any and all comments! A few open thoughts I have: - ~Should this include code snippets from the related providers or stay very high-level? At what point do we delegate to the examples folder?~ Keep things high level and delegate to examples folder - ~Should this include any related cards at the bottom?~ Added to the bottom - ~Should other places in the documentation link back to here?~ Added link from routing - Should it be a top-level route, or be underneath advanced? --- docs/api-reference/next/router.md | 2 +- docs/authentication.md | 208 ++++++++++++++++++++++++++++++ docs/manifest.json | 4 + 3 files changed, 213 insertions(+), 1 deletion(-) create mode 100644 docs/authentication.md diff --git a/docs/api-reference/next/router.md b/docs/api-reference/next/router.md index 65d1318884..3c92861ce4 100644 --- a/docs/api-reference/next/router.md +++ b/docs/api-reference/next/router.md @@ -100,7 +100,7 @@ export default function Page() { } ``` -Redirecting the user to `pages/login.js`, useful for pages behind authentication: +Redirecting the user to `pages/login.js`, useful for pages behind [authentication](/docs/authentication): ```jsx import { useEffect } from 'react' diff --git a/docs/authentication.md b/docs/authentication.md new file mode 100644 index 0000000000..591cddb311 --- /dev/null +++ b/docs/authentication.md @@ -0,0 +1,208 @@ +--- +description: Learn about authentication patterns in Next.js apps and explore a few examples. +--- + +# Authentication + +Authentication verifies who a user is, while authorization controls what a user can access. Next.js supports multiple authentication patterns, each designed for different use cases. This page will go through each case so that you can choose based on your constraints. + +## Authentication Patterns + +The first step to identifying which authentication pattern you need is understanding the [data-fetching strategy](/docs/basic-features/data-fetching.md) you want. We can then determine which authentication providers support this strategy. There are two main patterns: + +- Use [static generation](/docs/basic-features/pages.md#static-generation-recommended) to server-render a loading state, followed by fetching user data client-side. +- Fetch user data [server-side](/docs/basic-features/pages.md#server-side-rendering) to eliminate a flash of unauthenticated content. + +### Authenticating Statically Generated Pages + +Next.js automatically determines that a page is static if there are no blocking data requirements. This means the absence of [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering) and `getInitialProps` in the page. Instead, your page can render a loading state from the server, followed by fetching the user client-side. + +One advantage of this pattern is it allows pages to be served from a global CDN and preloaded using [`next/link`](/docs/api-reference/next/link.md). In practice, this results in a faster TTI ([Time to Interactive](https://web.dev/interactive/)). + +Let's look at an example for a profile page. This will initially render a loading skeleton. Once the request for a user has finished, it will show the user's name: + +```jsx +// pages/profile.js + +import useUser from '../lib/useUser' +import Layout from '../components/Layout' + +const Profile = () => { + // Fetch the user client-side + const { user } = useUser({ redirectTo: '/login' }) + + // Server-render loading state + if (!user || user.isLoggedIn === false) { + return Loading... + } + + // Once the user request finishes, show the user + return ( + +

Your Profile

+ 
{JSON.stringify(user, null, 2)}
+ + ) +} + +export default Profile +``` + +You can view this example in action [here](https://next-with-iron-session.vercel.app/). Check out the [`with-iron-session`](https://github.com/vercel/next.js/tree/canary/examples/with-iron-session) example to see how it works. + +### Authenticating Server-Rendered Pages + +If you export an `async` function called [`getServerSideProps`](/docs/basic-features/data-fetching.md#getserversideprops-server-side-rendering) from a page, Next.js will pre-render this page on each request using the data returned by `getServerSideProps`. + +```jsx +export async function getServerSideProps(context) { + return { + props: {}, // Will be passed to the page component as props + } +} +``` + +Let's transform the profile example to use [server-side rendering](/docs/basic-features/pages#server-side-rendering). If there's a session, return `user` as a prop to the `Profile` component in the page. Notice there is not a loading skeleton in [this example](https://next-with-iron-session.vercel.app/). + +```jsx +// pages/profile.js + +import withSession from '../lib/session' +import useUser from '../lib/useUser' +import Layout from '../components/Layout' + +export const getServerSideProps = withSession(async function ({ req, res }) { + // Get the user's session based on the request + const user = req.session.get('user') + + if (!user) { + return { + redirect: { + destination: '/login', + permanent: false, + }, + } + } + + return { + props: { user }, + } +}) + +const Profile = ({ user }) => { + // Show the user. No loading state is required + return ( + +

Your Profile

+ 
{JSON.stringify(user, null, 2)}
+ + ) +} + +export default Profile +``` + +An advantage of this pattern is preventing a flash of unauthenticated content before redirecting. It's important to note fetching user data in `getServerSideProps` will block rendering until the request to your authentication provider resolves. To prevent creating a bottleneck and decreasing your TTFB ([Time to First Byte](https://web.dev/time-to-first-byte/)), you should ensure your authentication lookup is fast. Otherwise, consider [static generation](#authenticating-statically-generated-pages). + +## Authentication Providers + +Now that we've discussed authentication patterns, let's look at specific providers and explore how they're used with Next.js. + +### Bring Your Own Database + +
+ Examples + +
+ +If you have an existing database with user data, you'll likely want to utilize an open-source solution that's provider agnostic. + +- If you need email/password log-in, use [`next-iron-session`](https://github.com/vercel/next.js/tree/canary/examples/with-iron-session). +- If you need to persist session data on the server, use [`next-auth`](https://github.com/vercel/next.js/tree/canary/examples/with-next-auth). +- If you need to support social login (Google, Facebook, etc.), use [`next-auth`](https://github.com/vercel/next.js/tree/canary/examples/with-next-auth). +- If you want to use [JWTs](https://jwt.io/), use [`next-auth`](https://github.com/vercel/next.js/tree/canary/examples/with-next-auth). + +Both of these libraries support either authentication pattern. If you're interested in [Passport](http://www.passportjs.org/), we also have examples for it using secure and encrypted cookies: + +- [with-passport](https://github.com/vercel/next.js/tree/canary/examples/with-passport) +- [with-passport-and-next-connect](https://github.com/vercel/next.js/tree/canary/examples/with-passport-and-next-connect) + +### Firebase + +
+ Examples + +
+ +When using Firebase Authentication, we recommend using the static generation pattern. + +It is possible to use the Firebase Client SDK to generate an ID token and forward it directly to Firebase's REST API on the server to log-in. However, requests to Firebase might take some time to resolve, depending on your user's location. + +You can either use [FirebaseUI](https://github.com/firebase/firebaseui-web-react) for a drop-in UI, or create your own with a [custom React hook](https://usehooks.com/useAuth/). + +### Magic (Passwordless) + +
+ Examples + +
+ +[Magic](https://magic.link/), which uses [passwordless login](https://magic.link/), supports the static generation pattern. Similar to Firebase, a [unique identifier](https://w3c-ccg.github.io/did-primer/) has to be created on the client-side and then forwarded as a header to log-in. Then, Magic's Node SDK can be used to exchange the indentifier for a user's information. + +### Auth0 + +
+ Examples + +
+ +[Auth0](https://auth0.com/) can support both authentication patterns. You can also utilize [API routes](/docs/api-routes/introduction.md) for logging in/out and retrieving user information. After logging in using the [Auth0 SDK](https://github.com/auth0/nextjs-auth0), you can utilize static generation or `getServerSideProps` for server-side rendering. + +### Supabase + +
+ Examples + +
+ +[Supabase](https://supabase.io/) is an open source Firebase alternative that supports many of its features, including authentication. It allows for row level security using JWT tokens and supports third party logins. Either authentication pattern is supported. + +### Userbase + +
+ Examples + +
+ +[Userbase](https://userbase.com/) supports the static generation pattern for authentication. It's open source and allows for a high level of security with end-to-end encryption. You can learn more about it in their [official site](https://userbase.com/). + +## Related + +For more information on what to do next, we recommend the following sections: + +
+ + Pages: + Learn more about pages and the different pre-rendering methods in Next.js. + +
+ +
+ + Data Fetching: + Learn more about data fetching in Next.js. + +
diff --git a/docs/manifest.json b/docs/manifest.json index bd32807629..140527683c 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -93,6 +93,10 @@ "title": "Deployment", "path": "/docs/deployment.md" }, + { + "title": "Authentication", + "path": "/docs/authentication.md" + }, { "title": "Advanced Features", "routes": [ -- GitLab