Is there a way to conditionally redirect to a specific page using NextAuth?

Question

Is there a way to conditionally redirect to a specific page using NextAuth?

My website has 2 points of user login: one is through my app and the other is via a link on a third-party site. If a user comes from the third-party site, they should be redirected back to it.

The only method I can come up with to distinguish if a user is coming from a third party is by adding a query parameter to the sign-in link.

For instance, the third party will provide a link like:

https://myapp.com/signin?comingFrom3rdParty=true

I aim to utilize this query parameter in the signIn callback function to determine the next step after successful login:

if(comingFrom3rdParty) {
  // redirect back to the third party
} else {
  // redirect to my website's dashboard
}

I'm unsure if using query parameters is the right approach for this situation, but I cannot think of an alternate solution at the moment.

javascript typescript next.js next-auth

Answer 1

Answer №1

the most straightforward solution I can think of involves utilizing document.referrer

useEffect(() => {
    const referrer = document.referrer;
    if (referrer !== null) {
      console.log(`I came from ${referrer}`);
      // additional actions can be taken here 
    }
  }, []);

In a scenario where you have two distinct applications running on ports 3000 and 3001. The component in port:3000 contains the following code

const Test = () => {
  return (
    <Link href="http://localhost:3001">
      <button className="rounded bg-red-600 px-9 py-2 text-white">
        Let's go
      </button>
    </Link>
  );
};

Upon clicking the button, users will be redirected to http://localhost:3001 with the ability to monitor the console output

Answer 2

the most straightforward solution I can think of involves utilizing document.referrer

useEffect(() => {
    const referrer = document.referrer;
    if (referrer !== null) {
      console.log(`I came from ${referrer}`);
      // additional actions can be taken here 
    }
  }, []);

In a scenario where you have two distinct applications running on ports 3000 and 3001. The component in port:3000 contains the following code

const Test = () => {
  return (
    <Link href="http://localhost:3001">
      <button className="rounded bg-red-600 px-9 py-2 text-white">
        Let's go
      </button>
    </Link>
  );
};

Upon clicking the button, users will be redirected to http://localhost:3001 with the ability to monitor the console output

Is there a way to conditionally redirect to a specific page using NextAuth?

Answer №1

Similar questions

Angular Alert: [$injector:modulerr] Unable to create the angularCharts module because: Error: [$injector:nomod]

What is the best way to utilize useEffect solely when the length of an array has

Connect jQuery navigation button to a specific web address

Capturing Auth0 session using MSW.js and Cypress

Bring in jspm libraries to your project via typescript

What is the most effective way to determine which radio button is currently selected in a group with the same name using JQuery?

Determine whether the object is facing the specified position

What is the most effective method for incorporating multi-line breadcrumb links in a React application?

Data retrieval on dashboard through ajax is not functioning properly

What is the process for building an interactive quiz using JavaScript?

The ValidationSchema Type in ObjectSchema Seems to Be Failing

How can I iterate through multiple rows in JavaScript?

Is it advisable to switch all properties to Angular Signals?

Should I consolidate my ajax requests into groups, or should I send each request individually?

What is preventing jQuery 3 from recognizing the '#' symbol in an attribute selector?

Can you explain the distinction between $and and $all in this specific scenario?

Vue table does not update when checkbox is unchecked

How can I implement the vm. syntax using ControllerAs in my application?

Styling of checkboxes in jQuery Mobile is missing after an AJAX request

Guidelines for transforming an HTML string into a JavaScript document