Navigating with NextJS to a personalized URL and managing the feedback from an external application

Question

Navigating with NextJS to a personalized URL and managing the feedback from an external application

I'm currently in the process of developing an application that involves redirecting users to a specific URL, prompting them to open an app (with a url starting with zel:), and then sending a request back to my server. Here's the envisioned user journey:

User clicks on the login button.
User is directed to open an app and complete the sign-in process.
The app sends a callback message to my server confirming the completion of the sign-in.
I verify the user's sign-in status and then redirect them to a new path (e.g., /afterlogin).

I'm unsure about the steps needed to achieve this. Can anyone provide guidance?

Below is the code snippet I've been working on:

// pages/login.js

import axios from 'axios';
import { useRouter } from 'next/router';

export default function Login() {
    const router = useRouter();
    const handleClick = () => {
        axios.get('https://api.runonflux.io/id/loginphrase').then(response => {
            if (response.data.status === 'success') {
                var loginPhrase = response.data.data;
                if (loginPhrase) {
                    router.push(`zel:?action=sign&message=${loginPhrase}&callback=${process.env.DOMAIN}api/validateSignature`);
                }
            }
        });
    }
    return (
        <div>
            <button onClick={handleClick}>Login</button>
        </div>
    )
}

This section represents the login page where users will initiate the sign-in process by clicking the login button, fetching a phrase through an API request, and getting redirected to authorize via an external app.

// pages/api/validateSignature.js

export default function handler(req, res) {
    if (req.method == 'GET') {

    }
    var url = "https://api.runonflux.io/id/verifylogin";
    var axios = require('axios');
    var data = JSON.stringify({
        "loginPhrase": req.body.message,
        "signature": req.body.signature,
        "zelid": req.body.address
    });
    var config = {
        method: 'post',
        url: url,
        data: data
    };
    axios(config)
        .then(function (response) {
            console.log(response.data);
        })
        .catch(function (error) {
            console.log(error);
        });
    res.status(200).json({ name: 'John Doe' })
}

This script manages the callback from the app.

A visual representation of the user flow can be viewed in this video - https://i.stack.imgur.com/Fn4j5.jpg

javascript next.js

Answer 1

Answer №1

My solution involved incorporating MongoDB to assist me in handling this task.

I have set up a redirect to a waiting page, which periodically checks MongoDB every 3 seconds to monitor if the customer has completed the sign-in process:

// pages/waiting/[loginPhrase.js]
import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router'

const WaitingPage = () => {
    const router = useRouter();
    const { loginPhrase } = router.query
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const checkApi = async () => {
            try {
                const response = await fetch('/api/checkMessage', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ "loginPhrase": loginPhrase }),
                });
                const json = await response.json();
                console.log(json.data[0]);
                if (json.data[0] !== undefined) {
                    const responseVerify = await fetch('https://api.runonflux.io/id/verifylogin', {
                        method: 'POST',
                        body: JSON.stringify({ "address": json.data[0].address, "message": json.data[0].message, "signature": json.data[0].signature }),
                    });
                    const respJson = await responseVerify.json();
                    console.log(respJson);
                    if (respJson.status === 'success' && respJson.data.message == 'Successfully logged in') {
                        router.push(`/success`);
                    }
                }
            } catch (err) {
                setLoading(false);
                console.error(err);
            }
        };

        const intervalId = setInterval(checkApi, 3000);
        return () => clearInterval(intervalId);
    }, []);


    return (
        <div>
            {loading ? (
                <p>Loading...</p>
            ) : data ? (
                <p>Data received: {JSON.stringify(data)}</p>
            ) : (
                <p>No data received</p>
            )}
        </div>
    );
};

export default WaitingPage;

I also created two API calls - one for the app callback to insert data into MongoDB:

// pages/api/signedMessage.js
import clientPromise from "../../lib/mongodb";

export default async function handler(req, res) {
    const client = await clientPromise;
    const db = client.db("zel_login");
    if (req.method === "POST") {
        if (!req.body.address || !req.body.message || !req.body.signature) {
            return res.status(400).json({ status: 400, message: "Bad Request" })
        }
        let messageObject = {
            createdAt: new Date(new Date().toISOString()),
            address: req.body.address,
            message: req.body.message,
            signature: req.body.signature
        }
        let newMessage = await db.collection("signed_messages").insertOne(messageObject);
        res.json(newMessage);
    }
}

The second API call attempts to locate the loginPhrase and then verifies it with an additional API call:

// pages/api/checkMessage.js
import clientPromise from "../../lib/mongodb";

export default async function handler(req, res) {
    const client = await clientPromise;
    const db = client.db("zel_login");
    if (req.method === "POST") {
        const message = await db.collection("signed_messages").find({ "message": req.body.loginPhrase }).toArray();
        res.json({ status: 200, data: message });
    }
}

Answer 2

My solution involved incorporating MongoDB to assist me in handling this task.

I have set up a redirect to a waiting page, which periodically checks MongoDB every 3 seconds to monitor if the customer has completed the sign-in process:

// pages/waiting/[loginPhrase.js]
import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router'

const WaitingPage = () => {
    const router = useRouter();
    const { loginPhrase } = router.query
    const [data, setData] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const checkApi = async () => {
            try {
                const response = await fetch('/api/checkMessage', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ "loginPhrase": loginPhrase }),
                });
                const json = await response.json();
                console.log(json.data[0]);
                if (json.data[0] !== undefined) {
                    const responseVerify = await fetch('https://api.runonflux.io/id/verifylogin', {
                        method: 'POST',
                        body: JSON.stringify({ "address": json.data[0].address, "message": json.data[0].message, "signature": json.data[0].signature }),
                    });
                    const respJson = await responseVerify.json();
                    console.log(respJson);
                    if (respJson.status === 'success' && respJson.data.message == 'Successfully logged in') {
                        router.push(`/success`);
                    }
                }
            } catch (err) {
                setLoading(false);
                console.error(err);
            }
        };

        const intervalId = setInterval(checkApi, 3000);
        return () => clearInterval(intervalId);
    }, []);


    return (
        <div>
            {loading ? (
                <p>Loading...</p>
            ) : data ? (
                <p>Data received: {JSON.stringify(data)}</p>
            ) : (
                <p>No data received</p>
            )}
        </div>
    );
};

export default WaitingPage;

I also created two API calls - one for the app callback to insert data into MongoDB:

// pages/api/signedMessage.js
import clientPromise from "../../lib/mongodb";

export default async function handler(req, res) {
    const client = await clientPromise;
    const db = client.db("zel_login");
    if (req.method === "POST") {
        if (!req.body.address || !req.body.message || !req.body.signature) {
            return res.status(400).json({ status: 400, message: "Bad Request" })
        }
        let messageObject = {
            createdAt: new Date(new Date().toISOString()),
            address: req.body.address,
            message: req.body.message,
            signature: req.body.signature
        }
        let newMessage = await db.collection("signed_messages").insertOne(messageObject);
        res.json(newMessage);
    }
}

The second API call attempts to locate the loginPhrase and then verifies it with an additional API call:

// pages/api/checkMessage.js
import clientPromise from "../../lib/mongodb";

export default async function handler(req, res) {
    const client = await clientPromise;
    const db = client.db("zel_login");
    if (req.method === "POST") {
        const message = await db.collection("signed_messages").find({ "message": req.body.loginPhrase }).toArray();
        res.json({ status: 200, data: message });
    }
}

Navigating with NextJS to a personalized URL and managing the feedback from an external application

Answer №1

Similar questions

Testing the screen size automatically using Javascript

What could be causing the content in my select box to change only when additional select boxes are introduced?

How to change the focus on a Material UI input field

Blur Event Triggered in Primefaces Editor

Utilizing jQuery and AJAX for submitting multiple POST requests

I'm struggling to get Router.push to redirect me on Next.js with an Express server

Next-auth does not automatically redirect users once they have successfully logged in using their GitHub credentials

Tips for effectively handling a prop in an HTML form using Vue.js and avoiding infinite loops with a computed property

Tips for sending a URL in form-data as a file with JavaScript or Axios

Implementing dynamic data binding in JavaScript templates

What methods can be used to defer the visibility of a block in HTML?

Creating a multi-dimensional array using information from a database

Can you explain the distinction between using useContext and Redux?

An issue encountered in the getServerSideProps function of NextJS when using axios

Import objects into THREE.js using OBJLoader, convert to Geometry, apply transformations, and finally convert to BufferGeometry

An error occurred: Cannot access the 'splice' property of an undefined value

How to activate the menu in AngularJS

The issue of Three.js SkinnedMesh jittering arises when it is distant from the scene's root (0,0,0)

Steps to insert an image object into a table

Display a particular div upon clicking a specific link, while concealing the other divs