Next.js Discord

Discord Forum

Custom Authentication.

Unanswered
kazii posted this in #help-forum
Open in Discord
kaziiOP
I have developed a custom backend that utilizes OTP verification for user authentication. To enhance user experience, I've implemented parallel routes, so when a user attempts a restricted action without being logged in, an OTP verification modal is displayed. Once the user verifies the OTP, the backend sets a session ID in a cookie and sends it to the client, successfully completing the authentication process.

Furthermore, I've incorporated middleware to ensure proper authentication, which redirects users to the appropriate pages. However, I've noticed that after the client login, if I navigate to the authenticated page, I encounter the same login flow again. Luckily, everything functions correctly after refreshing the page.

I would appreciate any insights or suggestions on how to improve this process or if there's a better way to handle the authentication flow. Thank you for your assistance.

7 Replies

Tramp ant
might be due to client side router cache
router.refresh() resets the cache i think
kaziiOP
I was able to fix this by passing a query param redirect and redirect user to the page he can from instead of using router.back().

'use client';
import React, { useCallback, useState } from 'react';
import ModalPhoneSection from './components/ModalPhoneSection';
import ModalOtpSection from './components/ModalOtpSection';
import { LOGIN_SCREEN } from './configs/enums';
import Modal from '@/common/components/Modal';
import { useRouter } from 'next/navigation';
import { ISendOtp } from '@/libs/api/auth/configs/types';
import { useSearchParams } from 'next/navigation';

const LoginModal = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const redirect = searchParams.get('redirect') || '/';

  const [currentScreen, setCurrentScreen] = useState(LOGIN_SCREEN.PHONE);
  const [screenData, setScreenData] = useState<ISendOtp>({} as ISendOtp);
  const [openModal, setOpenModal] = useState(true);

  const setLoginScreen = useCallback((screen: LOGIN_SCREEN, otp: ISendOtp) => {
    setCurrentScreen(screen);
    setScreenData(otp);
  }, []);

  const setCloseModal = useCallback(() => {
    setOpenModal(false);
    router.replace(redirect);
  }, [redirect, router]);

  const onOpenChange = (isOpen: boolean) => {
    if (!isOpen) router.back();
  };

  const renderScreen = () => {
    switch (currentScreen) {
      case LOGIN_SCREEN.PHONE:
        return <ModalPhoneSection setScreen={setLoginScreen} />;
      case LOGIN_SCREEN.OTP:
        return (
          <ModalOtpSection
            screenData={screenData}
            setScreen={setCurrentScreen}
            closeModal={setCloseModal}
          />
        );
    }
  };

  return (
    <Modal onOpenChange={onOpenChange} open={openModal}>
      {renderScreen()}
    </Modal>
  );
};

export default LoginModal;
However i'm facing this issue where in my middleware if user is not logged in im redirecting him to login?redirect=requestedPath.
And post login on the client side the url is not getting replaced with the redirect url.

Any suggestions?
Tramp ant
post login you could try returning a redirect http code so the browser itself redirects the user
Tramp ant
its hard to tell why url is not getting replaced with redirect url from the code youve shared. Can you share the login function?
i imagine youre relying on setCloseModal but still cant see how its being called