In this article, you'll learn about authentication in Next.js and how you can authenticate Next.js applications with LoginRadius.
\n\n\nNote: An understanding of React, Hooks, and Next.js is beneficial to follow this tutorial.
\n
Authentication is the process of validating that an individual is who they claim to be. Authentication is an essential feature for applications, particularly those that store user data.
\nYou should not mistake authentication for authorization. Authorization is the process of verifying that whether a user has required permission to access an asset or data set.
\nAuthentication deals with identifying a user, while authorization checks what resources or data an authenticated user has permission to access.
\nSome of the methods used to implement authentication are:
\nAuthentication is one of the most critical parts of an application’s security, so you should address it adequately.
\nA few aspects you should consider when assessing if you should build your authentication system or use a third-party solution:
\nIdentity Provider Support: How many identity providers do you plan to support, if any? With third-party solutions, you can authenticate users with email/password as well as identity providers such as Google, Github, Facebook, and more. Third-party solutions are always working hard to add support to even more providers. They also provide other authentication methods like Magic Link for passwordless authentication.
\nCan you build an authentication system that allows users to use their preferred authentication method, or will they be restricted?
\nAdvanced Security Features: Security and authentication go beyond email/password sign-in. Most third-party solutions provide necessary features, such as email confirmation, two-factor authentication (2FA), etc.
\nYou should let the security experts such as LoginRadius do what they do best while focusing on your main tasks — building excellent applications.
\nConsidering these factors, it's pretty easier to rely on a third-party solution, and it's also cheaper and more secure than building your own authentication system.
\n\n\nLoginradius is the world's first no-code identity platform. It is a simple, implementable solution for adding user authentication and authorization to your website.
\n
LoginRadius provides no-code services for authorization, authentication, account security, and much more. It has several interesting features, and some of them are:
\nNext.js offers two authentication patterns — client-side and server-side authentication.
\nWith client-side authentication, the authentication logic and user redirection are done in the browser. The page component fully loads before the redirect logic is executed.
\nWhen this authentication approach is used, developers usually use a loading indicator to indicate to the user that a process is running in the background. The loading indicator helps boost user experience. If the user’s authentication fails, redirect the user to a login page.
\nThe following example shows how to handle client-side redirects:
\nimport { useEffect } from "react"\nimport { useRouter } from "next/router"\nimport authService from "auth-service" //imaginary auth service\n\nexport default function ProtectedPage() {\n const router = useRouter()\n\n useEffect(() => {\n const authUser = authService.getUser()\n\n // if there is no authenticated user, redirect to login page_\n\n if (!authUser) {\n router.push("/login")\n }\n }, [])\n\n return (\n <>\n <h1>Welcome {user.name}. This is a protected page</h1>`\n </>\n )\n}The above code snippet handles client-side redirects in the browser using next/router. It also uses an imaginary authentication service, auth-service, for illustration purposes. You’ll work with LoginRadius later in this tutorial.
It checks if there is an authenticated user with the authService.getUser() method in the useEffect. If there is none, it redirects the user to the /login page using Next.js’s router object.
This is a simple illustration of client-side authentication and redirection.
\nWith server-side authentication, you can redirect a user from, say, pages/profile to pages/login. When non-authenticated users try to access a protected page, they are redirected to a login page. All of this is done on the server — before the request reaches the browser.
A benefit of this pattern is that non-authenticated users do not see flashes of unauthenticated content before they are redirected.
\nThe following example below shows how to handle server-side redirects:
\nexport default function ProtectedPage({ user }) {\n\treturn (\n\t\t<>\n\t\t\t<h1>Welcome {user.name}. This is a protected page</h1>\n\t\t</>\n\t)\n}\n\nexport const getServerSideProps = async context => {\n\tconst { user } = authService.getUser(context.req)\n\n\t// if there is no authenticated user, redirect to login page\n\n\tif (!user)\n\t\treturn {\n\t\t\tprops: {},\n\n\t\t\tredirect: { destination: "/login" },\n\t\t}\n\n\t\treturn { props: { user } }\n\t}\n}Using getServerSideProps enables rendering pages on the server. You can take advantage of that to also handle the redirection on the server.
The above code snippet uses the authService.getUser() method to get the authenticated user’s object. If there is no user, it returns an object with a redirect object. The redirect object contains a destination key, where you can put the page you want to redirect the user to, which is your application’s login page.
Now that you’ve understood the authentication patterns available, let’s see how to authenticate a Next.js application with LoginRadius.
\nThe steps below highlight how you can integrate and authenticate your Next.js applications with LoginRadius:
\nYou should create an account to get started with LoginRadius. There is a free plan you can start with.
\nNow that you have an account, you should get the credentials for your appName and apiKey from the dashboard. You'll need them later to use the React SDK.
Run the following command in your terminal to create a new Next.js application:
\nnpx create-next-app <name-of-project>\n//or\nyarn add create-next-app <name-of-project>Next, install the React SDK into the project:
\n```javascript\nnpm install loginradius-react\n//or\nyarn add loginradius-react\n```You need to wrap the root component with the SDK’s authentication provider.
\nYou also need to pass the account credentials to the provider. You can get these credentials from your LoginRadius account dashboard.
\nNavigate to pages/_app.js and update it with the code below:
import Head from "next/head"\nimport { LRAuthProvider } from "loginradius-react"\nimport { ChakraProvider } from "@chakra-ui/react"\nimport Layout from "../layout"\nimport "../styles/globals.css"\n\nfunction MyApp({ Component, pageProps }) {\n return (\n <>\n <Head>\n <title>Loginradius Next</title>\n </Head>\n\n <LRAuthProvider\n appName="your-app-name"\n apiKey="your-api-key"\n redirectUri={"http://localhost:3000/"}\n >\n <ChakraProvider>\n <Layout>\n <Component {...pageProps} />\n </Layout>\n </ChakraProvider>\n </LRAuthProvider>\n </>\n )\n}\n\nexport default MyAppThe above code snippet imports the LRAuthProvider component from loginradius-react. It passes the appName and apiKey taken from the LoginRadius account dashboard earlier to LRAuthProvider. It also sets the redirectUri to http://localhost:3000/.
The redirectUri is the callback URL where you want to redirect users after being authenticated. You should whitelist the redirect_uri in your LoginRadius account dashboard. Localhost URLs are whitelisted by default.
Now that you've integrated the SDK, let’s add the authentication functionality.
\nYour users should be able to log in and out of our application, so let’s set that up.
\nWe will add the log in and log out functionality to a Nav component. Let’s set up the component.
Create a layout folder in the root directory, and create a Nav.js file there. Add the following code to Nav.js:
import { Button, Flex, Stack } from "@chakra-ui/react"\nimport { useLRAuth } from "loginradius-react"\n\nexport default function Nav() {\n const { loginWithRedirect, logout } = useLRAuth()\n\n return (\n <Flex>\n <Stack spacing={[6, 8]}>\n <Button onClick={() => loginWithRedirect()}>Login to continue</Button>\n <Button onClick={() => logout()}>Log out</Button>\n </Stack>\n </Flex>\n )\n}Here, Chakra UI is used for UI components.
\nFirst, it imports the useLRAuth hook from the SDK. Next, it accesses the loginWithRedirect and logout methods from the useLRAuth hook.
Then, it passes loginWithRedirect and logout to the login and logout buttons’ onClick event handlers, respectively.
Having created the Nav component, we need to create the Layout component we mentioned earlier.
Create an index.js file in the layout folder, and paste the code below:
import { Box } from "@chakra-ui/react"\nimport Nav from "./Nav"\n\nexport default function Layout({ children }) {\n return (\n <Box h="100vh" bg="green.50">\n <Nav />\n <Box>{children}</Box>\n </Box>\n )\n}With that, you've added authentication to your application. However, you need a way to track the authentication state. You need to know if there is a logged-in user and do something with that information.
\nThe SDK also provides error and user objects, along with isLoading and isAuthenticated booleans. You'll use these to track the authentication state.
You can access information about an authenticated user, such as their email address, from the user object. If any, you can display error messages from the error object.
isAuthenticated returns true if there is an authenticated user and false if there is not.
We are currently rendering both the login and logout buttons in the Nav component. However, we don’t want that. We want to display the login button when there is no authenticated user and logout when there is an authenticated user.
Let’s update the Nav.js file with the code below to fix that:
import { Button, Flex, Stack } from "@chakra-ui/react"\nimport { useLRAuth } from "loginradius-react"\n\nexport default function Nav() {\n const { isAuthenticated, user, loginWithRedirect, logout } = useLRAuth()\n return (\n <Flex as="nav">\n <Stack spacing={[6, 8]}>\n {!user && (\n <Button onClick={() => loginWithRedirect()}>Login to continue</Button>\n )}\n\n {isAuthenticated && user && (\n <Button onClick={() => logout()}>Log out</Button>\n )}\n </Stack>\n </Flex>\n )\n}We conditionally display the login and logout buttons based on the authentication state.
\nIf there is a logged-in user, we want to redirect them to the profile page.
\nNavigate to pages/index.js file and update it with the code below:
import { useEffect } from "react"\nimport { useRouter } from "next/router"\nimport { useLRAuth } from "loginradius-react"\nimport { Button, Heading, VStack, Center } from "@chakra-ui/react"\n\nexport default function Home() {\n const { isLoading, isAuthenticated, error, user } = useLRAuth()\n const router = useRouter()\n\n useEffect(() => {\n if (user && isAuthenticated) {\n router.push("/profile")\n }\n }, [router, user, isAuthenticated])\n\n if (isLoading) {\n return <div>Loading...</div>\n }\n\n if (error) {\n return <div>Oops... {error.message}</div>\n }\n\n return (\n <Center pt={10}>\n <VStack spacing={[6, 8]}>\n <Heading as="h2">Welcome</Heading>\n <Text fontSize="3xl">Login to continue</Text>\n </VStack>\n </Center>\n )\n}Let’s break down the above code snippet:
\nuseEffect, it checks if there is a user object and if isAuthenticated is true. If these conditions are true, it redirects the user to their profile page. These conditions will only be true when the user has logged in. You'll set up the profile page later.isLoading boolean. If true, it displays “loading…”. In a production-ready application, you would display a loading spinner.error object and displays it to the user.You have to display information about the authenticated user. Let’s set that up.\nCreate a profile.js file in the pages directory and paste the code below:
\nimport { Box, Center, Heading } from "@chakra-ui/react"\nimport { useLRAuth } from "loginradius-react"\n\nexport default function Profile() {\n const { user, isLoading, isAuthenticated } = useLRAuth()\n\n if (isLoading) {\n return <div>Loading...</div>\n }\n\n if (isAuthenticated) {\n return (\n <Box>\n <Center mt={10}>\n <Heading a="h2">\n Welcome to your profile {user.Email[0].Value}\n </Heading>\n </Center>\n </Box>\n )\n }\n}You should display a user’s information if they're authenticated. Here, you check that they're authenticated with the isAuthenticated hook. If they're authenticated, return some JSX and display the user’s email address.
You can create protected routes to ensure only authenticated users can access those routes.
\nimport { withAuthenticationRequired } from "loginradius-react"\n\nconst Profile = () => {\n\tif (isAuthenticated) {\n\t\treturn (\n\t\t\t<Box\n\t\t\t\t...markup goes here\n\t\t\t</Box\n\t\t)\n\t}\n}\n\nexport default withAuthenticationRequired(Profile,\n\t//Show a message while the user waits to be redirected to the login page.\n\tonRedirecting: () => (\n\t\t<div>Redirecting you to LoginRadius awesome Login page</div>\n\t),\n});Here, the code snippet uses the withAuthenticationRequired higher-order component to wrap the Profile component. With this, anytime an unauthenticated user tries to access the /profile route, they'll be redirected to LoginRadius’s login page and then back to /profile after they log in.
The image below shows an authenticated user's profile page.
\nIn this tutorial, you have learned about user authentication and understood whether you should develop an authentication system in-house or use a modern identity platform like LoginRadius.
\nThen, you have briefly learned different authentication patterns available in Next.js. And you step-by-step understood how to authenticate Next.js applications with LoginRadius’s React SDK.
\nA working version of the code used in this tutorial is available on Github.
\n","frontmatter":{"title":"Your Ultimate Guide to Next.js Authentication","author":{"id":"Emadamerho-Atori Nefe","github":"nefejames","avatar":null},"date":"January 13, 2022","updated_date":null,"tags":["Authentication","React","Next.js","LoginRadius"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/cc1040bb014138d9f198e7e127d9c831/ee604/next-authentication.png","srcSet":"/static/cc1040bb014138d9f198e7e127d9c831/69585/next-authentication.png 200w,\n/static/cc1040bb014138d9f198e7e127d9c831/497c6/next-authentication.png 400w,\n/static/cc1040bb014138d9f198e7e127d9c831/ee604/next-authentication.png 800w,\n/static/cc1040bb014138d9f198e7e127d9c831/f3583/next-authentication.png 1200w,\n/static/cc1040bb014138d9f198e7e127d9c831/5707d/next-authentication.png 1600w,\n/static/cc1040bb014138d9f198e7e127d9c831/eeb1b/next-authentication.png 1920w","sizes":"(max-width: 800px) 100vw, 800px"}}}},"fields":{"authorId":"Emadamerho-Atori Nefe","slug":"/engineering/guest-post/nextjs-authentication-guide/"}}}]},"authorYaml":{"id":"Emadamerho-Atori Nefe","bio":"A frontend developer and UI enthusiast who loves learning new things, creating technical content, and sharing his knowledge with others. In his pastime, he reads manga, watches Anime, and writes poems.","github":"nefejames","stackoverflow":null,"linkedin":null,"medium":null,"twitter":null,"avatar":null}},"pageContext":{"id":"Emadamerho-Atori Nefe","__params":{"id":"emadamerho-atori-nefe"}}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}