Pass a url path when redirecting from a SSR component (Next.js 13.4/Next-Auth)

I've protected certain routes to check if the user is signed in.

I'm using the getServerSession from "next-auth" and redirect from "next/navigation" (the only one available for server component I believe).

const session = (await getServerSession(authOptions)) as Session;
  if (!session) {
    redirect(`/auth/signin`);
  }

This works fine.
But I want to pass the firstly requested url when redirected, so that when the user signin, he is redirected to the url he was trying to get to the first time.

I believe it would give something like

  const urlPath = // I don't know how to obtain the urlPath !
  const session = (await getServerSession(authOptions)) as Session;
  if (!session) {
    redirect(`/auth/signin?callbackUrl=${urlPath}`);
  }

Here is the entire code for generating the page:

import { getServerSession, Session } from 'next-auth';
import { authOptions } from '@/lib/helpers/authOptions';
import { redirect } from 'next/navigation';

interface LayoutProps {
  children: React.ReactNode;
}


export default async function Layout({ children}: LayoutProps) {
  const session = (await getServerSession(authOptions)) as Session;
  
  const urlPath = // ??

  if (!session) {
    redirect(`/auth/signin?callbackUrl=${urlPath}`);
  }

  return <>{children}</>;
}

I'm only passing the children as prop, but I don't see the url path in this.
I guess I could add to the expected props:

interface LayoutProps {
  children: React.ReactNode;
  url?: string;
}
export default async function Layout({ children}: LayoutProps) {
  const urlPath = url ? url : '/';
// Rest of code

but I don't know how to pass this url prop to the layout, because I don't know when it is called.

I'd prefer a util server-side function like

export async function getUrlPath(req) {
  const url = req.url;
  return url;
}

But again, I don't know how to call it and passing it the correct req.
I've tried with a NextResponse (req, res) but the req is always empty...

There should be a way to obtain the requested url in the node.js part of Next, no?!

In Next.js, you can get to the mentioned URL in the server-side code utilizing the req object from the approaching HTTP demand. Be that as it may, since your Design part is certainly not a standard Next.js Programming interface course, you will not have direct admittance to the req object. To accomplish your objective, you can utilize a custom server middleware.

To pass the URL way to the Format part, you can make a custom server middleware that removes the URL way from the approaching solicitation and adds it as a prop to the Design part.

This is the way you can make it happen:
Create a utility function to get the URL path:

import { IncomingMessage } from 'http';

export function getUrlPath(req: IncomingMessage): string {
  const url = req.url;
  return url || '/';
}

Make a custom server middleware to join the URL way to the req object:

// in the pages/api/custom-middleware.ts
import { NextApiRequest, NextApiResponse } from 'next';
import { getUrlPath } from 'utils/getUrlPath';

export default function customMiddleware(
  req: NextApiRequest,
  res: NextApiResponse,
  next: () => void
) {
  // Attach the URL path to the request object
  req.urlPath = getUrlPath(req);

  next();
}

Register the custom middleware in your next.config.js document:

// next.config.js
module.exports = {
  async rewrites() {
    return [
      // Add any other rewrites if you have
      {
        source: '/:path*',
        destination: '/:path*',
      },
    ];
  },
  async redirects() {
    return [
      // Add any other redirects if you have
      {
        source: '/auth/signin',
        destination: '/auth/signin',
        permanent: true,
      },
    ];
  },
  async middleware() {
    const customMiddleware = require('./pages/api/custom-middleware').default;
    return customMiddleware;
  },
};

Alter your Design part to get the urlPath prop:

// components/Layout.tsx
import { getServerSession, Session } from 'next-auth';
import { authOptions } from '@/lib/helpers/authOptions';
import { redirect } from 'next/navigation';
import { NextApiRequest } from 'next';

interface LayoutProps {
  children: React.ReactNode;
  urlPath: string; // Add the urlPath prop
}

export default function Layout({ children, urlPath }: LayoutProps) {
  const session = (await getServerSession(authOptions, req as NextApiRequest)) as Session;

  if (!session) {
    redirect(`/auth/signin?callbackUrl=${urlPath}`);
  }

  return <>{children}</>;
}

Presently, when you utilize the Format part, make a point to pass the urlPath prop from the custom middleware:

// pages/some-page.tsx
import Layout from 'components/Layout';

export default function SomePage({ urlPath }) {
  return (
    <Layout urlPath={urlPath}>
      {/* Your page content */}
    </Layout>
  );
}

export async function getServerSideProps({ req }) {
  // The req object contains the urlPath from the custom middleware
  return {
    props: {
      urlPath: req.urlPath,
    },
  };
}

Now, your Layout component will receive the urlPath prop containing the original URL path, and you can use it for redirection after authentication.

I hope it helps!

With regards to Next.js 13.4 with the application switch variant and involving server activities for server-side rationale, you can in any case accomplish passing the mentioned URL as a callback URL likewise as portrayed previously. We'll change the way to deal with make it work with server activities.

Here is the altered arrangement:

Make a custom capability to get the mentioned URL:

// utils/getUrlPath.ts
import { IncomingMessage } from 'http';

export function getUrlPath(req: IncomingMessage): string {
  const url = req.url;
  return url || '/';
}

Change your high level format to pass the callback URL utilizing server activities:

// guest_route/layout.tsx
import { serverAction, getServerSession, Session } from 'next-auth';
import { authOptions } from '@/lib/helpers/authOptions';
import { redirect } from 'next/navigation';
import { getUrlPath } from 'utils/getUrlPath';

export default function LayoutTopLevel({ children }: { children: React.ReactNode }) {
  return serverAction(async ({ req }) => {
    const session = await getServerSession(authOptions, req);
    if (!session) {
      const urlPath = getUrlPath(req);
      redirect(`/auth/signin?callbackUrl=${encodeURIComponent(urlPath)}`);
      return null; // Return null to avoid rendering the children when not authenticated
    }

    return <>{children}</>;
  });
}

Utilize the settled format in your safeguarded pages:

// logged_route/layout.tsx
import LayoutTopLevel from '@/guest_route/layout';

export default function LayoutNested({ children }: { children: React.ReactNode }) {
  // You can add additional checks or customizations specific to this layout if needed.
  // Since you are protecting logged-in routes, you can directly use LayoutTopLevel here.
  return <LayoutTopLevel>{children}</LayoutTopLevel>;
}

Your safeguarded page can continue as before, utilizing the settled format:

// logged_route/page.tsx
import LayoutNested from '@/logged_route/layout';

export default function ProtectedPage() {
  return (
    <LayoutNested>
      {/* Your page content */}
    </LayoutNested>
  );
}

With this methodology, the high level design (guest_route/layout.tsx) utilizes a server activity to check for the meeting status. In the event that the client isn't verified, it promptly diverts to the signin page with the mentioned URL as the callback URL. In the event that the client is validated, it continues with delivering the settled formats and page parts to no one's surprise.

Kindly note that the idea of getServerSideProps isn't implemented in the application switch rendition, so the utilization of server activities can be an option in contrast to dealing with server-side rationale in a more adaptable way.