Replies: 5 comments
-
|
Hi, I don't know if this is the best way of doing this but it works for me. I set the callbackUrl to the form's action and do a redirect in the getServerSideProps section if the callbackurl's language is different than current locale. pages/login.js import Head from 'next/head';
import { useRouter } from 'next/router';
import { useTranslations } from 'next-intl';
import { csrfToken, useSession } from 'next-auth/client'
import Layout from '../components/Layout';
export default function Login({ csrfToken }) {
const [ session, loading ] = useSession();
const router = useRouter();
// Redirect user if already logged in
if (loading) return null
if (!loading && session) router.push('/');
const { NEXT_PUBLIC_URL } = process.env;
const t = useTranslations('Login');
return (
<Layout>
<Head>
<title>{t('title')}</title>
</Head>
<h3>{t('pleaseLogin')}</h3>
<form method="post" action={`/api/auth/callback/credentials?callbackUrl=${NEXT_PUBLIC_URL}/${router.locale}/`}>
<input name="csrfToken" type="hidden" defaultValue={csrfToken} />
<label>
{t('passcode')}
<input name="passcode" type="password" />
</label>
<button type="submit">{t('signIn')}</button>
</form>
</Layout>
);
}
export async function getServerSideProps(ctx) {
const { resolvedUrl, query, locale } = ctx;
if (query && query.callbackUrl) {
const url = new URL(query.callbackUrl);
const [,cbLang] = url.pathname.split('/');
if (cbLang !== locale) {
return {
redirect: {
destination: `/${cbLang}${resolvedUrl}`
}
}
}
}
return {
props: {
csrfToken: await csrfToken(ctx)
}
}
}I wasted a lot of time trying to figure this out and deadline is upon me so if someone has better suggestions, I'm happy to hear them :) |
Beta Was this translation helpful? Give feedback.
-
|
Adding here since I ran into this recently. @cahva maybe what could be a bit less hacky is to instead of using signIn() you use router.push like this. |
Beta Was this translation helpful? Give feedback.
-
|
#1489 is an effort to support i18n on built-in pages. For now it must be worked around in user land. |
Beta Was this translation helpful? Give feedback.
-
|
Same problem here, but I needed additionally to the solution of @raimille1 explicitly add to my Then this worked for me, too. |
Beta Was this translation helpful? Give feedback.
-
|
Adopting solution by @cahva proposed in #863 (comment) I found that there can be endless redirect, because for default locale next.js does not show it in url. Fixed version of import { GetServerSidePropsContext } from 'next';
import { getCsrfToken } from 'next-auth/react';
/**
* Handle localization of signin page.
* See: https://github.com/nextauthjs/next-auth/discussions/863
*/
export async function getServerSideProps(ctx: GetServerSidePropsContext) {
const { resolvedUrl, query, locale, locales } = ctx;
const callbackUrl = getQueryValue(query.callbackUrl);
if (callbackUrl) {
const url = new URL(callbackUrl);
const cbLocale = url.pathname.split('/')?.[1];
const isCbLocaleValid = Boolean(locales?.includes(cbLocale));
if (isCbLocaleValid && cbLocale !== locale) {
return {
redirect: {
destination: `/${cbLocale}${resolvedUrl}`,
},
};
}
}
return {
props: {
csrfToken: await getCsrfToken(ctx),
},
};
}
function getQueryValue(value?: string | string[]) {
return (Array.isArray(value) ? value[0] : value) || '';
} |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
How to launch signin page with proper locale in the url?
I have a localized website (following the nextjs i18n l10n localization guidelines https://nextjs.org/docs/advanced-features/i18n-routing) with main page available at two addresses:
(1) http://localhost:3000
(2) http://localhost:3000/en
This main page has a button:
<button onClick={() => signIn()}>{signInText}</button>The problem is that clicking on this button from address (2) leads to:
http://localhost:3000/api/auth/signin?callbackUrl=http%3A%2F%2Flocalhost%3A3000%2Fen
So, the locale is not there. I could make my own localized signin page, however, the localized page would rely on the router.locale which comes from url and if it's not there, it won't work. E.g. for links made with component, locale is added in the url by the router.
The custom pages option in [...nextauth].ts could be:
It must be a string. Maybe if it were possible to pass a callback function then I could pass the locale.
Also, I noticed that in case of my own signin page, the callbackUrl was not url-encoded and looked like this:
http://localhost:3000/auth/signin?callbackUrl=http://localhost:3000/en
I am not sure if it should be url-encoded or not, but for the default signin page it is, so I just mention it here.
Beta Was this translation helpful? Give feedback.
All reactions