Integration with NextAuth.js

This guide will show you how to integrate e-Próspera's OAuth Provider with Firebase Authentication. Read the code for the demo project here.

1. Create a Next.js project

Create a Next.js project bootstrapped with create-next-app.

2. Create a Firebase project

Go to the Firebase console and create a new project. Initialize the project with a web app:

You'll then receive a few lines of configuration code, which you'll need to put somewhere in your Next.js project. We put it in helpers/firebase.ts.

// he// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyDPYR2a7N9n5pImT0YLnuAFJLjUaibqwZ0",
  authDomain: "testing-e-prospera-auth.firebaseapp.com",
  projectId: "testing-e-prospera-auth",
  storageBucket: "testing-e-prospera-auth.firebasestorage.app",
  messagingSenderId: "261074844408",
  appId: "1:261074844408:web:7c222771bda8de06dc990d",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

In addition to the standard Firebase config code, we added the export const auth = getAuth(app); line, which will be used to authenticate users with e-Próspera.

3. Add the OICD provider to your Firebase project

Navigate to the "Authentication" section on the Firebase console:

Click on the "Sign in method" tab:

Then, add a new OICD provider:

And configure it! You will need to contact louis@prospera.hn to get the client ID and client secret. In addition, if you're setting up a staging environment, you will need to set the issuer to https://staging-portal.eprospera.com, and if you're setting up for production, you will need to set the issuer to https://portal.eprospera.com.

4. Code the actual app!

Open our demo app's app/page.tsx and app/api/kyc/route.ts to see how we did a minimal app that allows you to sign in + pull the KYC data from the e-Próspera API!