From 8a6502d39805eb103717cb42f5760074f514c991 Mon Sep 17 00:00:00 2001 From: Timothy Armes Date: Mon, 30 Sep 2024 15:34:54 +0200 Subject: [PATCH] Update the README --- .vscode/settings.json | 2 ++ README.md | 30 ++++++++++++++++++- src/app/[locale]/(main)/components/Footer.tsx | 4 +-- 3 files changed, 33 insertions(+), 3 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index dc86bb2..b74065b 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,6 +3,7 @@ "ajouter", "approximative", "Armes", + "behaviour", "bgcolor", "cellspacing", "colour", @@ -22,6 +23,7 @@ "kodingdotninja", "Lente", "localisation", + "localised", "markercluster", "moveend", "politique", diff --git a/README.md b/README.md index 09604bb..b3061ae 100644 --- a/README.md +++ b/README.md @@ -35,8 +35,36 @@ and is deployed on [Vercel](https://vercel.com/) - Code Spell Checker (to avoid English spelling mistakes in the code) - Console Ninja (for easier debugging) +## User authentication + +Users may choose to create an account in order to receive notification of tournaments. + +The only personal information that we have to have is their email address, and so we've decided to use magic link's for user log on. +This gives us only the information we need (the confirmed email address) and means that we don't have to store any other sensitive information at all (not even a hashed password). +To handle user authentication we're using [authjs](https://authjs.dev). + +## Locale handling + +The site is localised into French and UK English using [next-intl](https://next-intl-docs.vercel.app). +By default `next-intl` chooses the language to display by using, in priority, the URL prefix, a cookie and the accept-language header. + +When sending new tournament emails, we'd prefer to send them in the user's preferred locale. To do this we need to store then information on the user object in the database. +Here's the workflow: + +1. When the user tries to connect to the platform, the magic link includes a callback URL that returns the user to the page that they were on. + That URL is localised, so it'll return the to the same page in the language they were viewing. + +2. If this is a new user, `next-auth` creates the user object in the database (without any preferred locale). + +3. When rendering the site, the `LocalChecker` component checks to see if we have an authenticated user. + If we do and they don't yet have a preferred locale, then we update the user to set their preferred locale based on the current locale (as provided by `next-intl`). + If the user already has a preferred locale, we force a redirect to that locale if it's different from the current one. + If there isn't an authenticated user, we revert to the default behaviour from `next-intl` + +4. Finally, the language changer in the footer will update the user's preferred locale. + ## Contributions Contributions are encouraged. Please open an issue to discuss your ideas. -We use the [GitHub Flow](https://www.gitkraken.com/learn/git/best-practices/git-branch-strategy#github-flow-considerations) branching strategy. Add your code into a feature branch such as `feature/feature-name`. +We use the [GitHub Flow](https://www.gitkraken.com/learn/git/best-practices/git-branch-strategy#github-flow-considerations) branching strategy. Add your code into a feature branch such as `feature/feature-name`. diff --git a/src/app/[locale]/(main)/components/Footer.tsx b/src/app/[locale]/(main)/components/Footer.tsx index 4c9b94a..34c44f3 100644 --- a/src/app/[locale]/(main)/components/Footer.tsx +++ b/src/app/[locale]/(main)/components/Footer.tsx @@ -21,9 +21,9 @@ export default function Footer() { const params = useParams(); const { status } = useSession(); - const changeLanguage = (lang: string) => { + const changeLanguage = async (lang: string) => { // Store the user's locale preference if they're authenticated - if (status === "authenticated") setUserLocale(lang); + if (status === "authenticated") await setUserLocale(lang); // Redirect to the same page with the new locale router.push({ pathname, params: params as any }, { locale: lang });