Next.js
1. Before We Start
1. Make sure you have completed step 1
1️⃣Step 1 - Create your first project and access point2. Make sure you are familiar with Next.js environments before you start
2. Integrating Eartho into Your Next.js Application
1. Install the SDK
Using npm:
Using yarn:
2: Eartho Creators Configuration
Create a Regular Web Application in the Eartho Developers Dashboard.
Setup Assitant Tab: Go to your 'Setup Assistant' tab.
Trusted Domains:
Configure the following URLs under the "Trusted Domains" section:
Allowed Callback URLs:
http://localhost:3000/api/auth/callback
Allowed Logout URLs:
http://localhost:3000/
Ensure these settings are also configured for your production domain.
Basic Information: Note down your Client ID, Client Secret, and Domain values.
3: Config Setup
Create a
.env.local
File: In the root of your project directory, create a.env.local
file with the necessary Eartho configuration values:
4: Using the App Directory and Pages
1. Add the Dynamic API Route
Create
route.js
File:/app/api/access/[eartho]/route.ts
Populate
route.ts
with the following code: 1. Give name to every access point you have created and set it as a key as follows 2. Change every access_id and copy it from the access points page accordingly
2. Add the EarthoProvider to Your Layout:
3. Implement Authentication in the App Directory:
5: Edge and Middleware
Next.js 14 supports running code at the edge, which allows for faster performance and lower latency. You can use middleware to run code before a request is completed, which is useful for tasks like authentication, logging, and data transformation.
Create Middleware:
Last updated