Step-by-Step Guide to Free Authentication for Next.js Developers

Implementing authentication in your Next.js application doesn't have to be a daunting task. With Eartho, you can quickly set up robust, secure, and free authentication. This step-by-step guide will walk you through the process, from installation to integration, ensuring your Next.js application is secure and user-friendly.

Step 1: Set Up Your Next.js Project

First, ensure you have a Next.js project set up. If you don't have one already, you can create a new project using the following commands:

npx create-next-app@latest my-nextjs-app
cd my-nextjs-app

Step 2: Install the Eartho SDK

Next, install the Eartho SDK, which will help to integrate authentication seamlessly.

Using npm:

npm install @eartho/one-client-react

Using yarn:

yarn add @eartho/one-client-react

Step 3: Configure Eartho in Your Next.js Application

Sign up for an Eartho account and create a new project. Once that's done, you’ll get your Eartho Client ID.

In your project, create a new file called earthoConfig.js in the src directory and add the following:

// src/earthoConfig.js
export const earthoConfig = {
 clientId: "YOUR_EARTHO_CLIENT_ID"
};

Step 4: Wrap Your Application with Eartho Provider

Edit your pages/_app.js file to include the Eartho provider. This ensures that Eartho will be available throughout your entire application.

// pages/_app.js
import React from 'react';
import { EarthoOneProvider } from '@eartho/one-client-react';
import { earthoConfig } from '../src/earthoConfig';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
 return (
   <EarthoOneProvider clientId={earthoConfig.clientId}>
     <Component {...pageProps} />
   </EarthoOneProvider>
 );
}

export default MyApp;

Step 5: Create Authentication Components

Now, let's create some components for login and logout functionality.

Login Button Component:

// src/components/LoginButton.js
import React from 'react';
import { useEarthoOne } from '@eartho/one-client-react';

const LoginButton = () => {
 const { connectWithPopup } = useEarthoOne();

 const handleLogin = () => {
   connectWithPopup({ accessId: 'YOUR_EARTHO_ACCESS_ID' });
 };

 return (
   <button onClick={handleLogin}>
     Log In
   </button>
 );
};

export default LoginButton;

Logout Button Component:

// src/components/LogoutButton.js
import React from 'react';
import { useEarthoOne } from '@eartho/one-client-react';

const LogoutButton = () => {
 const { logout } = useEarthoOne();

 const handleLogout = () => {
   logout({ returnTo: window.location.origin });
 };

 return (
   <button onClick={handleLogout}>
     Log Out
   </button>
 );
};

export default LogoutButton;

Step 6: Display User Information

To display the logged-in user's information, create a UserProfile component.

// src/components/UserProfile.js
import React from 'react';
import { useEarthoOne } from '@eartho/one-client-react';

const UserProfile = () => {
 const { user, isConnected, isLoading } = useEarthoOne();

 if (isLoading) {
   return <div>Loading...</div>;
 }

 if (!isConnected) {
   return <div>Please log in</div>;
 }

 return (
   <div>
     <h2>Welcome, {user.displayName}</h2>
     <img src={user.photoURL} alt="User Profile" />
     <p>Email: {user.email}</p>
   </div>
 );
};

export default UserProfile;

Step 7: Integrate Components into Your App

Now, integrate the login, logout, and user profile components into your Next.js app. Edit the pages/index.js file:

// pages/index.js
import React from 'react';
import LoginButton from '../src/components/LoginButton';
import LogoutButton from '../src/components/LogoutButton';
import UserProfile from '../src/components/UserProfile';

const Home = () => {
 return (
   <div>
     <h1>Next.js Authentication with Eartho</h1>
     <LoginButton />
     <LogoutButton />
     <UserProfile />
   </div>
 );
}

export default Home;

Conclusion

And there you have it! You've successfully implemented secure, free user authentication in your Next.js application using Eartho. This step-by-step guide demonstrates just how simple it can be to integrate robust authentication, allowing you to focus on what makes your app great.

By leveraging Eartho, you not only enhance the security of your application but also provide a seamless and user-friendly authentication experience for your users. Ready to take your Next.js app to the next level? Get started with Eartho today!

‍