Is it possible to set up an automatic redirection to the Identity Provider sign-in page when accessing a protected page in Next.js using Auth.js?

Question

Is it possible to set up an automatic redirection to the Identity Provider sign-in page when accessing a protected page in Next.js using Auth.js?

Currently in the process of developing a web platform utilizing [email protected] and Auth.js([email protected]).

The provider has been configured with the given code, allowing successful signing in using the "Sign in" button.

auth.ts

import NextAuth from 'next-auth'
import Cognito from 'next-auth/providers/cognito'

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [Cognito],
})

app/login/page.tsx

import { auth, signIn } from '@/auth'

export default async function Login() {
  return (
    <form
      action={async () => {
        'use server'
        return await signIn('cognito')
      }}
    >
      <button type="submit">Sign in</button>
    </form>
  )
}

Challenges Encountered

Incorporating middleware to secure all pages and automatically redirect users to the Amazon Cognito(IdP) sign-in page is causing issues. The current code is failing to work as intended (remaining on protected pages without an active session and failing to redirect).

Is there a method to directly redirect to the Cognito sign-in page?

Note: While I am able to redirect users to /login within the application, I aim to streamline this process for user convenience.

middleware

import { signIn, auth } from "@/auth"

export default auth((request) => {
  if (!request.auth) {
    signIn('cognito')
  }
})

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico|login).*)"],
}

Error Log

ReadonlyRequestCookiesError: Cookies can only be modified in a Server Action or Route Handler. Read more: https://nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options
    at Proxy.callable (webpack-internal:///(middleware)/./node_modules/next/dist/esm/server/web/spec-extension/adapters/request-cookies.js:22:15)
    at signIn (webpack-internal:///(middleware)/./node_modules/next-auth/lib/actions.js:53:65)
 ⨯ unhandledRejection: ReadonlyRequestCookiesError: Cookies can only be modified in a Server Action or Route Handler. Read more: https://nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options
    at Proxy.callable (webpack-internal:///(middleware)/./node_modules/next/dist/esm/server/web/spec-extension/adapters/request-cookies.js:22:15)
    at signIn (webpack-internal:...

javascript typescript next.js next-auth

Answer 1

Answer №1

there seems to be an issue:

Oops! Cookies can only be modified in a Server Action or Route Handler.

It appears that the error occurred because you attempted to perform signIn within a server-component. Remember, cookies can be accessed on the server side but can't be set or deleted there. Convert your signin component into a client component to resolve this error.

Regarding the requested middleware behavior, if you wish to secure routes at the middleware level, you must provide an array of protected routes to the middleware. Then, compare the current pathname with each path in the protected_routes_array to ensure route protection.

import { getToken } from "next-auth/jwt";
import { NextRequest, NextResponse } from "next/server";
export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
  const protectedRoutes=['/route1', '/route2' ];
  const token = await getToken({ req: request });
  if (token == null && protectedRoutes.includes(pathname)) {
    return NextResponse.redirect(
      new URL(
        "/signin",
        request.url
      )
    );
  }
}

Answer 2

there seems to be an issue:

Oops! Cookies can only be modified in a Server Action or Route Handler.

It appears that the error occurred because you attempted to perform signIn within a server-component. Remember, cookies can be accessed on the server side but can't be set or deleted there. Convert your signin component into a client component to resolve this error.

Regarding the requested middleware behavior, if you wish to secure routes at the middleware level, you must provide an array of protected routes to the middleware. Then, compare the current pathname with each path in the protected_routes_array to ensure route protection.

import { getToken } from "next-auth/jwt";
import { NextRequest, NextResponse } from "next/server";
export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
  const protectedRoutes=['/route1', '/route2' ];
  const token = await getToken({ req: request });
  if (token == null && protectedRoutes.includes(pathname)) {
    return NextResponse.redirect(
      new URL(
        "/signin",
        request.url
      )
    );
  }
}

Is it possible to set up an automatic redirection to the Identity Provider sign-in page when accessing a protected page in Next.js using Auth.js?

Challenges Encountered

Error Log

Answer №1

Similar questions

Utilize Typescript Functions to Interact with GeoJSON Data in Palantir Foundry

"Encountering a Syntax Error When Using request.post in Dojo Framework on Button Click

JavaScript: Harnessing the power of scripts to handle dynamically loaded data via AJAX

Warning: The use of jQuery load to trigger a Synchronous XMLHttpRequest on the main thread is now considered deprecated

Dealing with AngularJS: Issue arises when attempting to inject $modal into a controller nested within a directive

Select several options as chosen when the page is loaded

Mastering the use of useMasterKey in Parse with Node.js: A guide

Looking to retrieve the mouse coordinates using JavaScript

The JavaScript code malfunctions when I introduce a new HTML tag

Conflict between jquery and hoverIntent libraries

browsing through a timeline created using HTML and CSS

Enhancing performance with React.memo and TypeScript

Unable to render Row using MySQL in conjunction with ReactJS

Access the data from a JSON object within a v-select menu

Guide on populating text boxes in a form automatically using ngFor?

What is the best way to isolate the text before a particular segment within a string, excluding any blank spaces?

Typescript's definition file includes imports that can result in errors

Invoke the method in customButton component of fullcalendar

Tips for triggering window load event on a particular page

Submitting the form without utilizing Ajax, but instead sending data directly to a PHP script