Redirect new user to dynamic URL

[nyedidikeke]

Your question
What is the most effective way to redirect a new user to a dynamic route?

What are you trying to do
Source id from a database or API and redirect newly registered users to pages/post/[id]/index.js on first login.

• Running version 3.1.0 of next-auth.
• User records are persisted in database.
• Custom next-auth pages configuration document.

Documentation feedback

• Found the documentation helpful
• Found documentation but was incomplete
• Could not find relevant documentation
• Found the example project helpful
• Did not find the example project helpful

[ndom91]

I don't know if this is the most effective way, but the signin method takes a callback Url as the second parameter.

After the user signs up and you're signing him in for the first time, you could grab your id from your db and pass the url to the signin method.

signIn('provider_name', { callbackUrl: `/post/${id}` })

See: https://next-auth.js.org/getting-started/client#specifying-a-callbackurl

[krebeDev]

I'm faced with this exact scenario. My current workaround redirects to the dynamic route when there is a session.

// auth/login.js

import { useEffect } from 'react'
import { signIn } from 'next-auth/client'

const SignInPage = (props) => {
	const [session] = useSession()
	const router = useRouter()

	useEffect(() => {
		if (session) router.push(`/post/${id}`)
	}, [session])

	const handleLogin = (credentials) => {
		signIn('credentials', credentials)
	}

	return (
             <form>
                   // Form controls
             </form>
     )
}

The problem with this implementation is, on a slow network, the login page still displays for a few minutes before useEffect takes effect.

[irving-caamal]

Hi guys I've had this issue, the solution for this is to use absolute URL's

like so:

signIn('provider_name', { callbackUrl: http:localhost/post/${id} }) ✔️

You can use Node variables if you want to make it dynamic between your dev, test or production mode.

signIn('provider_name', { callbackUrl: process.env.NODE_ENV === 'production' ? process.env.PRODUCTIONURL:process.env.DEVURL/post/${id} }) ✔️

(It is because nextauthjs make a redirect and not and asynchornous call and you need to specify the absolute path)

[m5x5]

For this matter it might also be a good idea to use window.location.origin e.g.:

signIn('provider_name', {
  callbackUrl: `${window.location.origin}/post/${id}`,
});

It doesn't work in all cases, but it should work during render.

[iaincollins]

The callback function is one option, bit there is also a newUser page that is configurable for exactly this purpose:

https://next-auth.js.org/configuration/pages

The URL for the page is static but it could be an API endpoint which simply gets the User ID (e.g. an API endpoint that calls getSession()) and then redirects to the final URL with the ID in it if you explicitly need the URL to be in that format.