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

Discovering the destination link of a website while utilizing GM_xmlhttpRequest

Error occurred during service communication in the Kubernetes environment

Navigating the terrain of multiple checkboxes in React and gathering all the checked boxes

Angular JS: Extracting the header from a CSV file

What could be the issue with my JSON data stream?

Stopping an endless loop when retrieving data from localStorage in next.js

Dynamic resizing in NextJs does not trigger a re-render

A versatile jQuery function for extracting values from a :input selector

Concealing overflow for text content through CSS styling

Manipulating arrays in a JSON file with JavaScript

Unexpected outcomes from the Jquery contains method

CSS or jQuery: Which is Better for Hiding/Showing a Div Within Another Div?

Issue: Failed to retrieve configuration settings due to the inability to connect with the query-engine-node-api library in Prisma and nextjs framework

Ensuring session data is updated when saving a mongoose model

Extracting and retrieving data using JavaScript from a URL

What is the most effective method for generating dial images through programming?

revalidatePath function in NextJS does not reset the form

Use Node.js with Selenium and WebdriverIO to simulate the ENTER keypress action on

The Joi validate() function will return a Promise instead of a value when used within an asynchronous function

Displaying tooltips dynamically for newly added elements all sharing a common class in React