Next.js Authentication and Stripe Payments with Eartho

In today's fast-paced digital world, ensuring seamless user management and secure payment processing is pivotal to any successful web application. This can often require juggling multiple services, systems, and lines of code. What if you could manage this efficiently with one seamless solution? Enter Eartho, your go-to platform for integrating Next.js authentication and payments effortlessly.

Why Choose Eartho?

Eartho offers a comprehensive solution for handling authentication, user profiles, authorization, and integrated payments, all in one SDK and admin dashboard. The best part? It's completely free. Eartho is designed with developers in mind, ensuring a smooth experience in managing user access and payments, allowing you to focus on what you do best—building fantastic apps.

Key Features of Eartho

Before diving into the integration process, let's explore why Eartho stands out:

1. Cost-Free Infrastructure: Eartho provides a robust infrastructure for free, helping you save on the high costs typically associated with authentication and payment systems.
2. Advanced Security: Regular tests and protection against XSS, CSRF, session fixation, and session leaks ensure your app stays secure.
3. Integrated Payments: Simplifies the payment integration process by removing the need to manually connect payment systems.
4. Customizable UI & Templates: Easily customize your app’s look to enhance user experience.
5. 24/7 Customer Support: Dedicated support for any inquiries or issues you may encounter.

Setting Up Next.js Authentication with Eartho

Step 1: Install the Eartho SDK

Start by installing the Eartho SDK:

npm install @eartho/one-client-react

Step 2: Initialize Eartho in Your Application

Next, wrap your Next.js application in the Eartho provider. You'll need to obtain your Eartho client ID from the Eartho Creator Dashboard.

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

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

export default MyApp;

Step 3: Implement Authentication in Your Components

Utilize Eartho’s hooks to manage the authentication state in your components:

‍
// src/pages/index.js
import React from 'react';
import { useEarthoOne } from '@eartho/one-client-react';

const HomePage = () => {
 const {
   isLoading,
   isConnected,
   user,
   connectWithPopup,
   logout,
 } = useEarthoOne();

 if (isLoading) return <div>Loading...</div>;
 if (isConnected) {
   return (
     <div>
       Hello, {user.displayName}
       <button onClick={() => logout({ returnTo: window.location.origin })}>Logout</button>
     </div>
   );
 }

 return (
   <button onClick={() => connectWithPopup({ accessId: "YOUR_EARTHO_ACCESS_ID" })}>
     Log In
   </button>
 );
};

export default HomePage;

Integrating Payments with Eartho

Eartho simplifies the process of integrating payments into your Next.js app without the need for additional SDKs. Here’s how to get started:

Step 1: Set Up Your Eartho Payment Integration

In the Eartho dashboard, go to the Finance tab and connect your payment account (such as Stripe). Fill out the necessary information, including bank details, company info, etc.

Step 2: Creating Access Points with Payments

Access points can serve as gateways for your users, providing login functionalities, subscription options, or premium upgrades. Follow these steps to create an access point with payments:

1. Log into your Eartho Creators account.
2. Select your project.
3. Navigate to the "Add Access Point" section on the project page.
4. Choose the type of access point—Login, Subscription, or Premium Upgrade.
5. Configure the payment details and pricing model.

Step 3: Implementing Payments in Your Next.js App

Once your payment account and access points are set up, retrieve the access ID from the dashboard and use it within your code:

‍
import React from 'react';
import { useEarthoOne } from '@eartho/one-client-react';

const PaymentComponent = () => {
 const { user, connectWithPopup } = useEarthoOne();

 const handleUpgrade = () => {
   connectWithPopup({ accessId: "YOUR_EARTHO_PREMIUM_ACCESS_ID" })
     .then(() => {
       // Check user access after the upgrade
       if (user.access.includes("YOUR_EARTHO_PREMIUM_ACCESS_ID")) {
         console.log("User has premium access");
       } else {
         console.log("Upgrade failed");
       }
     })
     .catch(error => {
       console.error("Error upgrading access", error);
     });
 };

 return (
   <div>
     {user.access.includes("YOUR_EARTHO_PREMIUM_ACCESS_ID") ? (
       <p>You have premium access!</p>
     ) : (
       <button onClick={handleUpgrade}>Upgrade to Premium</button>
     )}
   </div>
 );
};

export default PaymentComponent;

Final Thoughts

With powerful integration, security, and easily customizable UI options, Eartho simplifies the complexities of authentication and payment integration. By combining Eartho with Next.js, you can ensure a seamless, secure, and user-friendly experience for your app's users.

Explore Eartho today and transform the way you manage access and payments in your Next.js applications. For more details, visit the Eartho documentation and start building the future you envision.

‍