External identity providers offer several benefits, such as adding a visibly trusted sign-in option, enabling sign-in without usernames and passwords, and getting additional information about users from the identity provider if they consent to it.
A well-known identity provider seen on many websites is Google login. Users can choose to log in with their Google account on a website, which lets Google authenticate them and return their details to your application.
In this article, you'll learn how to integrate Google login in your Next.js app. First, you'll see how to use a library like NextAuth.js to manually add a Google login to your website. Then, you'll learn how to use a third-party authentication provider like Clerk to quickly add a Google login to your website. Lastly, this article compares the two methods.
You'll find the code for this article in this GitHub repository.
To follow along with this tutorial, you'll need the latest versions of Node.js, which, at the time of writing, is 18.12.1, and npm, which, at the time of writing, is 9.1.3.
You can find the base project for this article here. The project is a Next.js 13 application that imitates a news website with a user paywall preventing users from reading articles without being logged in. Tailwind CSS is used to style the different pages and components in the project.
If you browse through the files, you'll notice that the authentication logic is incomplete. The <LoginButton /> component shows a Sign In or Sign Out button depending on whether the user is authenticated. However, if you open the components/LoginButton.jsx file, you'll see there's no logic to check if the user is authenticated, and the loggedIn variable is always false. Similarly, the page/index.jsx file should display a banner prompting the user to log in if they're unauthenticated and the article if the user is authenticated. However, the logic is also missing, and loggedIn is always false. You'll add this functionality as part of the tutorial.
The first demonstration below shows you how to use the NextAuth.js library to add a Google Login to your website.
To get started, create a new Next.js app using the base project above as a template. Open a new terminal window and execute the following npx command.
The command will create a new Next.js application in the gotham-newspaper-website-nextauth folder and clone the base project from the GitHub repository.
Before you can add a Google login to your website using NextAuth.js, you must register your website in Google Cloud to get OAuth keys for your application.
Navigate to Google Cloud in your browser. If you have a Google account already, you can click on Sign in. Otherwise, click on Start free to create a new account.
Once you're logged in, click the Select a project dropdown in the top menu. In the dialog box that appears, click New Project in the top right of the dialog.
Give your project a descriptive name and click Create.
Wait for Google Cloud to finish creating the project, then select the project from the Select a project dropdown menu in the top menu. A menu will appear on the left side of the page. Find and hover over the APIs and services menu item. In the submenu that appears, click OAuth consent screen.
Google Cloud will prompt you for User Type. Since your application will let anyone log in using Google, select the External user type and click on Create.
In the next screen, provide your website's information, such as the app name and user support email. You can skip the App domain section and click the Save and Continue button at the bottom of the page.
Now you'll need to configure the OAuth scopes your website will need. Click on Add or Remove Scopes. A window should slide out from the right where you can select which scopes your application will need. In this case, since you're using only Google to authenticate the user, select the following scopes:
Click on the Update button and continue using the Save and Continue button.
The screen will prompt you to specify test users for your application while it's still in development. Click Add Users and add your Google email address to log in to your website. You can add up to one hundred test users. Then, when you're ready to release your application, you can change it so that anyone can log in.
Once you've added the users, click on Save and Continue to continue to the Summary screen.
Now that you've configured your website in Google Cloud, you need to retrieve your Client Key and Client Secret, which you'll use to configure NextAuth.js.
First, click on Credentials in the left menu and then on Create Credentials at the top of the screen. In the menu that appears, select OAuth client ID.
Select Web application in the Application type field and give your application a name. Then, in Authorised JavaScript origins, add http://localhost:3000 as an origin. In Authorised redirect URIs, add http://localhost:3000/api/auth/callback/google as a callback URL. Finally, click Create at the bottom of the page.
A dialog should appear with your Client ID and Client Secret. Copy both values and keep them somewhere safe as you'll need them when configuring NextAuth.js.
Open a terminal instance and navigate to your project directory. Then, run the following command to install the NextAuth.js package in your Next.js app:
Once the package is installed, you need to create an auth endpoint in your Next.js app for NextAuth.js. Create a new subfolder called auth in the pages/api. Then, create a new file in the folder called [...nextauth].js and paste the following code in it:
The code snippet above declares an authOptions variable containing configuration settings for your website's Google login.
Inside the authOptions object, notice how you access the Google ID and Secret as environment variables. To set these environment variables, create a .env.local file in the root directory of your project and paste the code below. Replace <GOOGLE_ID> and <GOOGLE_SECRET> with the Google ID and Secret you retrieved in the previous section when setting up your application in Google Cloud:
Lastly, you must set up SessionProvider in your Next.js app. This provider will let you use hooks such as the useSession hook and manage client sessions across browsers and windows. To do this, open your pages/_app.jsx file and paste the following code:
Now that you can access the user's session inside your components, create a Sign In with Google button, which you'll display on your login page. In your components folder, create a new file called GoogleButton.jsx and paste the following code.
The button itself is relatively simple. First, you created a button that contains the Google logo and the text "Sign In with Google". Then, you called the signIn method included in NextAuth.js and specified that you want to sign in using Google.
Once you've created the Google Button, add the button to your login page. Open the pages/login.jsx file and replace the comment /*Place login form here*/ with the Google button.
You'll also want to prevent logged-in users from accessing the login page. To do this, you can use the useSession hook and check the user's authentication status before returning the page. See the changes in the file below:
You can test your app by running it using the following command in your terminal.
Click on the Sign In button on the home page and try to log in using the Sign In with Google button. You should be able to select your Google account and be redirected back to your website's home page. However, you'll still see the LoginBanner prompting you to sign in.
To fix this, update your index.jsx page and your LoginButton.jsx component. First, open the pages/index.jsx file and paste the code below, which will display the <Article /> component to logged-in users and the <LoginBanner /> tag to unauthenticated users:
Next, open your components/LoginButton.jsx file and paste the following code, which will show authenticated users the Sign Out rather than the Sign In button:
Run your application using the npm run dev command.
Once you're authenticated, you can now see the article and a Sign Out button. Try logging out and in again to see how the website behaves as a logged-in and logged-out user.
Congratulations! You've implemented a Google login on your website using NextAuth.js.
However, remember that this is only the first piece of the puzzle. You must still develop additional authentication logic, like creating a database to store your registered users. For this, NextAuth.js provides adapters that let you store user details in different databases or backend systems. You'll also have to add logic and screens for registering users and, if users can sign in with a password, a "forgot password" screen.
So, while you have a simple website with authentication, some work is still needed to get it production-ready.
Clerk.com is an authentication and user management service that lets you integrate authentication in your Next.js application with minimal effort. It also offers integrations with many third-party identity providers, such as Google.
Create a new project using the same base project mentioned previously. Execute the following npx command in a new terminal window.
Before you can integrate Clerk.com in your Next.js app, you'll need to sign up for an account and create an application.
Sign up for a Clerk.com account. Once you've verified your email address and phone number (if you specified one), you'll land on the Dashboard page, where you can create a new application.
On your Clerk.com Dashboard, click on Add application to create an application in Clerk.com for your Next.js app.
Clerk.com will prompt you for your application's name. You'll also need to select which methods of authentication you want for your application. After naming your application, switch on Email in the Standard Authentication section and Google under the Social Connections header in the Connected accounts section.
Click Finish to continue to your application screen.
When configuring Clerk.com in your Next.js app, you'll need to specify some environment variables for Clerk.com. You can access these environment variables by clicking on API Keys in the left menu.
Copy your Frontend API key somewhere as you'll need it in the next section. You can also click the Show key in the Backend API keys section and copy that. Finally, copy the JWT verification key and store it somewhere handy.
Clerk.com has created an npm package that simplifies adding Clerk.com authentication to your Next.js application. Install it in your app using the following command:
Once the package has finished installing, set up the environment variables needed for Clerk.com. In your project's root directory, create a new file called .env.local and paste the following code, but replace <CLERK_FRONTEND_API>, <CLERK_API_KEY>, and <CLERK_JWT_KEY> with the API Keys you retrieved in the Clerk.com Dashboard:
You'll notice that the code snippet prefixes the Clerk Frontend API key with NEXT_PUBLIC_ so that it can be accessed on the client side in your Next.js application.
Now, surround your application in the <ClerkProvider /> component so your app can check if the user is authenticated and use other features in Clerk.com. To do so, open your pages/_app.jsx file and surround your <Component /> component with a <ClerkProvider /> element. The sample below shows the final result:
That's all that's needed to get Clerk.com to work in your Next.js app.
One thing to note is that if you're using Next.js API routes or server-side rendering that relies on authentication, you'll need to configure the Clerk.com middleware as well. However, you can skip this step since this demonstration uses neither of these features.
Now that Clerk.com is set up, you can add the <SignIn /> component to your login page. This component will render the login form, which prompts users to log in with Google login or to use an email address. The page should also redirect authenticated users to the home page.
Open the pages/login.jsx file and replace the code there with the following code sample:
The <SignIn /> component offers customization options that let you customize the component's appearance. In this case, the code sets the primary color to the website's primary color and the sign-in form is centered using the mx-auto TailwindCSS class.
Run your app using the npm run dev command and navigate to your website in a browser. When you click on Sign In and are taken to the login page, you'll notice the Clerk.com sign-in component.
Test your authentication by clicking on Continue with Google. Once you're authenticated, the app should redirect you to the home page.
However, you'll still see the <LoginBanner /> component instead of the article. Fix this by opening the pages/index.jsx file and replacing the code there with the following code sample, which will check whether the user is authenticated and show the appropriate component:
The code sample uses the <SignedIn /> and <SignedOut /> components from Clerk.com. The <SignedIn /> component will display its contents to logged-in users while the <SignedOut /> component displays its contents to unauthenticated users.
You must also update the <LoginButton /> component to show authenticated users the Sign Out button. Do this by opening the components/LoginButton.jsx file and replacing the contents with the following.
Notice how the code sample above uses the useAuth hook instead of the useUser hook. The useAuth hook is similar to the useUser hook. However, it also returns a signOut method used in the Sign Out button's onClick handler to sign the user out.
Rerun your application using the npm run dev command. Next, test authenticating and logging out of your Google account. The website should display the article and Sign Out button when logged in and the login banner and Sign In button when logged out.
As is clear from this tutorial, Clerk.com is easier to implement with fewer and simpler steps than NextAuth.js. It also has some added benefits.
Clerk.com manages the OAuth Keys required to make Google authentication work and lets you add other social logins such as Facebook, Twitter, GitHub, and more by simply toggling it in your dashboard.
With NextAuth.js, the security burden falls on you as the developer. You're responsible for transporting and saving user credentials. You also need to develop additional functionality like the "forgot password" flow and, where applicable, ensure you're GDPR and CCPA compliant.
Clerk.com simplifies user management and authentication by managing the authentication process and storing your user's credentials securely. It provides standard functionality like "forgot password" out of the box. It also lets you view all the users who have signed up to your website, enable/disable them, and more without any additional development on your part.
Clerk.com is also already GDPR and CCPA compliant. They are regularly audited by third parties and conduct pen testing to ensure their infrastructure and services are secure.
If you want to provide additional security for your users using OTP codes using NextAuth.js, you'll have to develop this logic manually. Clerk.com provides out-of-the-box support for OTP codes using both SMS and email.
With Web3 gaining traction, you might want to support logging in with Web3. While NextAuth.js's Credentials provider lets you use Web3, it does require significant development. Adding Web3 authentication to your app with Clerk.com is pretty effortless. Simply enable your application's authentication with Metamask and use it alongside other authentication providers such as Google login and with other Clerk.com features such as OTP codes.
This article showed you how to integrate Google login manually with NextAuth.js as well as how to do it with Clerk.com's user management service. The code for both methods is in this GitHub repository.If you enjoyed this article, you might also like our guide to implementing session-based authentication with React and Express.
Compared to using NextAuth.js, Clerk.com is easier and provides additional benefits like out-of-the-box "forgot password", OTP, and Web3 authentication functionality as well as user management features. It's also GDPR and CCPA compliant.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。