Antti | kirjautuminen ja rekistöröityminen sekä authentication #23

anttiasmala · 2024-04-04T15:32:37Z

Nousi pari kysymystä mieleen, joten ajattelin pushata ja kysyä ennenkuin lähtee isommin tekemään 😄

…ttps://lucia-auth.com/getting-started/nextjs-pages

…s://lucia-auth.com/getting-started/nextjs-pages and https://lucia-auth.com/tutorials/username-and-password/nextjs-pages

…to handle registering. Added some basic handler functions there

…so credits can be given easier

…t middleware interfering. Most likely will be replaced / deleted, but it works for now in development stage

…rst name etc to make development easier and faster

…written multiple times

…ion callable

…st for user creation

vercel · 2024-04-04T15:32:47Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lahjalista	❌ Failed (Inspect)			May 1, 2024 9:32pm

public/credits_for_images.txt

pages/register.tsx

pages/api/auth/register.ts

anttiasmala · 2024-04-18T09:52:14Z

utils/handleError.ts

+type KnownFrontEndErrorTexts =
+  | 'email was not unique!'
+  | 'invalid credentials!'
+  | 'invalid request body!'
+  | (string & Record<never, never>);
+
+const FRONT_END_HANDLER: Record<KnownFrontEndErrorTexts, string> = {
+  'email was not unique!': 'Sähköposti on jo käytössä',
+  'invalid credentials!': 'Sähköposti tai salasana on virheellinen!',
+  'invalid request body!': 'Sähköposti tai salasana on virheellinen',
+};


Olisiko tälle parempaa toteutusta 😄

Lyhykäisyydessään tuon tehtävä on kääntää serveriltä tulevat virheet (ovat englanniksi) suomeksi. Onko tuon tekemiseen jokin parempi tapa kuin käyttää Recordia? KnownFrontEndErrorTextsin idea on se, että osaa ehdottaa ennaltatiedettyjen virheiden tekstit suoraan. Rivillä 30 | (string & Record<never, never>); idea on vain "kiertää" TypeScriptin virhe. Ei liene kovin järkevä tapa 😂

Jos Record on paras tapa toteuttaa, teoriassa lienee parempi tehdä ilman KnownFrontEndErrorTexts-typeä?

Tähän tapaan:

Suggested change

type KnownFrontEndErrorTexts =

| 'email was not unique!'

| 'invalid credentials!'

| 'invalid request body!'

| (string & Record<never, never>);

const FRONT_END_HANDLER: Record<KnownFrontEndErrorTexts, string> = {

'email was not unique!': 'Sähköposti on jo käytössä',

'invalid credentials!': 'Sähköposti tai salasana on virheellinen!',

'invalid request body!': 'Sähköposti tai salasana on virheellinen',

};

const FRONT_END_HANDLER: Record<string, string> = {

'email was not unique!': 'Sähköposti on jo käytössä',

'invalid credentials!': 'Sähköposti tai salasana on virheellinen!',

'invalid request body!': 'Sähköposti tai salasana on virheellinen',

};

Itse tekisin tuon virheen määrityksen näin

const FRONT_END_HANDLER = { 'email was not unique!': 'Sähköposti on jo käytössä', 'invalid credentials!': 'Sähköposti tai salasana on virheellinen!', 'invalid request body!': 'Sähköposti tai salasana on virheellinen', } as const; type KnownFrontEndErrorTexts = keyof typeof FRONT_END_HANDLER;

Kun määrittelyn tekee näin pitää teksti hakea seuraavasti

const responseText = e.response.data.toLowerCase(); const frontendText = FRONT_END_HANDLER[responseText as KnownFrontEndErrorTexts]; if (frontendText) { console.error(frontendText); return frontendText; } else {

Wow! 😮 Erittäin siisti tapa toteuttaa tuo, kiitos! Ei käynyt mielessäkään toteuttaa tuolla tavalla, toivottavasti tulevaisuudessa tulee 😅

anttiasmala · 2024-04-18T10:22:08Z

pages/api/auth/login.ts

+const luciaLongSession = new Lucia(adapter, {
+  sessionExpiresIn: new TimeSpan(30, 'd'),
+  sessionCookie: {
+    attributes: {
+      secure: process.env.NODE_ENV === 'production',
+    },
+  },
+});


Tähän en löytynyt vastausta Lucian dokumenteista tai netistä. Ainoa tapa mikä näyttäisi olevan Session-keksien pituuden määrittämiseen on sessionExpiresIn-arvo. Tässä olisi kaksi vaihtoehtoa eli lyhyempi (2 vk) ja pidempi (30 päivää). Se määräytyy, onko "Muista minut" -painike painettu kirjautumisen yhteydessä. Tämä Session-arvo sitten tallennetaan tietokantaan

Eihän sessionExpiresIn-arvoa pysty vaihtamaan enää lennosta, kun jollekkin muuttujalle on määritetty Class-arvo? Googlen mukaan ei ja AI sanoi kanssa, että ei ole mahdollista. Ajattelin vielä varmistaa 😄

En usko että sessionExpiresIn arvoa voi vaihtaa myöhemmin, eli tämä on oikea tapa. Siirtäisin tämän kuitenkin auth.ts tiedostoon, jotta molemmat lucia-objektit on määritetty samassa paikassa.

anttiasmala · 2024-04-18T10:24:05Z

pages/api/auth/login.ts

+
+    const { email, password, rememberMe } = req.body as UserLoginDetails;
+
+    const lucia = rememberMe ? luciaLongSession : luciaShortSession;


Tämä määrittää sen, että kumpaa "istunnon" pituutta käytettään

Näin hyvä, mutta siirtäisin tosiaan luciaLongSession samaan tiedostoon mistä luciaShortSession importataan.

backend/auth.ts

anttiasmala · 2024-04-18T10:26:55Z

backend/auth.ts

+export const lucia = new Lucia(adapter, {
+  sessionExpiresIn: new TimeSpan(14, 'd'),
+  sessionCookie: {
+    attributes: {
+      secure: process.env.NODE_ENV === 'production',
+    },
+  },
+  getUserAttributes({
+    createdAt,
+    email,
+    firstName,
+    lastName,
+    updatedAt,
+    uuid,
+  }: User): User {
+    return {
+      uuid: uuid,
+      firstName: firstName,
+      lastName: lastName,
+      email: email,
+      createdAt: createdAt,
+      updatedAt: updatedAt,
+    };
+  },
+});


Onko kaksi viikkoa hyvä pituus, ennenkuin vaaditaan uudelleenkirjautuminen?

Tämä on muuten otettu Lucian ohjeista, mutta User-type on vaihdettu omaan, joka toimii tässä paremmin

Laittaisin 1 tunti jos ei valitse "Muista minut" ja 30 päivää jos valitsee sen.

anttiasmala · 2024-04-18T10:29:34Z

backend/auth.ts

+declare module 'lucia' {
+  interface Register {
+    Lucia: typeof lucia;
+    DatabaseUserAttributes: DatabaseUserAttributes;
+    DatabaseSessionAttributes: DatabaseSessionAttributes;
+  }
+}
+interface DatabaseUserAttributes extends User {}
+interface DatabaseSessionAttributes extends CreateSession {}


Rivi 38 on Lucian ohjeista, muistaakseni rivit 39 ja 40 ovat itse tekemiäni

Rivit 43 ja 44 näyttäisi olevan ihan turhat

Suggested change

declare module 'lucia' {

interface Register {

Lucia: typeof lucia;

DatabaseUserAttributes: DatabaseUserAttributes;

DatabaseSessionAttributes: DatabaseSessionAttributes;

}

}

interface DatabaseUserAttributes extends User {}

interface DatabaseSessionAttributes extends CreateSession {}

declare module 'lucia' {

interface Register {

Lucia: typeof lucia;

DatabaseUserAttributes: User;

DatabaseSessionAttributes: CreateSession;

}

}

Täytyy laittaa testiin ennenkuin tekee muutoksia, ettei mikään hajoa, mutta tämmöisen huomasin 😄

Rivit 43 ja 44 näyttäisi olevan ihan turhat

Taitaa olla sitä varten jos haluaa lisätä jotain custom-attribuutteja tietokantaan Userille tai Sessiolle mutta tässä tapauksessa tarpeettomia.

Muutama huomio tähän kohtaan: DatabaseUserAttributes kohtaan pitää laittaa Database-tyyppi. Nyt näyttää siltä, että getUserAttributes saa User tyypin, eli sen voisi välittää semmoisenaan eteenpäin. Oikeasti se saa PrismaUser tyypin, jolloin siitä pitää poistaa id ja password kentät (kuten olet tehnyt, eli sun getUserAttributes on implementoitu oikein vaikka tyypitys on väärin).

DatabaseSessionAttributes on sitä varten, jos sessio-tauluun haluaa tallentaa jotain custom-tietoja (esim. mistä maasta sessio on). Meillä ei ole mitään custom-tietoja, eli sen rivin voi poistaa.

Jotta PrismaUser saa importattua import type { User, PrismaUser } from '~/shared/types'; komennolla pitää muokata types.ts tiedostoa, ks. kommentti siellä.

Suggested change

declare module 'lucia' {

interface Register {

Lucia: typeof lucia;

DatabaseUserAttributes: DatabaseUserAttributes;

DatabaseSessionAttributes: DatabaseSessionAttributes;

}

}

interface DatabaseUserAttributes extends User {}

interface DatabaseSessionAttributes extends CreateSession {}

declare module 'lucia' {

interface Register {

Lucia: typeof lucia;

DatabaseUserAttributes: PrismaUser;

}

}

anttiasmala · 2024-04-18T10:33:08Z

icons/index.ts

En tiedä onko sulla kokemusta tästä, mutta lienee turha tämä index.ts-tiedosto. Itse tykkään importtaa SVG:t suoraan tiedostosta

Edit: toisaalta index.ts:stä importtaaminen vähentää periaatteessa rivejä, jos joutuu monta kuvaketta importtaamaan

Esim:
import SvgEyeOpen from '~/icons/eye_open';
import SvgEyeSlash from '~/icons/eye_slash';

Pitää käydä muutenkin nuo iconit läpi, kun osa niistä on snake_casella, osa kebab-casella ja osa sitten PascalCasella 🤣

Makuasia, kumpikin toimii hyvin. Itse en yleensä käytä tämmöisiä barrel tiedostoja.

Tiedoston suoraan importtaaminen tuntuu luentavammalta kuin tuolta index.ts:stä.

Ja mitä oon ymmärtänyt, niin monesti "indexin" importtaamminen saattaa hidastaa koodia vs esim. tietyn funktion importtaaminen, muistaakseni mainitsitkin tästä bcryptin kanssa toimiessani 👍

Tosin tässä sitä ongelmaa nyt ei ole kun pari hassua riviä, mutta kuitenkin

package.json

anttiasmala · 2024-04-18T10:38:37Z

pages/index.tsx

+export async function getServerSideProps(
+  context: GetServerSidePropsContext,
+): Promise<GetServerSidePropsResult<{ user: User }>> {
+  const cookieData = await validateRequest(context.req, context.res);
+  if (!cookieData.user) {
+    return {
+      redirect: {
+        permanent: false,
+        destination: '/login',
+      },
+    };
+  }
+  return {
+    props: {
+      user: JSON.parse(JSON.stringify(cookieData.user)) as User,
+    },
+  };
+}


En tiedä onko sulla kokemusta Nextin getServerSideProps-funktiosta, että onko kuinka helppo saada geneeriseksi. Sain importit toimimaan toisesta tiedostosta, mutta en saanut context-argumenttia mitenkään siirrettyä sinne toiseen tiedostoon 😄 Lähinnä helpottaisi ettei tätä tarvitsisi jokaiseen tiedostoon kopioida 😅 (jos on mahdollista tehdä geneerinen)

Middlewareen kannattanee tehdä authentication-tsekkaus, mutta sitten jos authentication onkin kunnossa, niin serveriltä täytyy käyttäjän tiedot saada, tähän käytän getServerSideProps-funktiota

Jos siirrät funktion toiseen tiedostoon, niin näin pitäisi onnistua (tiedosto kannattaa nimetä paremmin ja laittaa oikeaan hakemistoon):

// index.tsx import { getServerSideProps } from './getServerSideProps'; export { getServerSideProps }; // getServerSideProps.js import { User } from '~/shared/types'; import { GetServerSidePropsContext, GetServerSidePropsResult } from 'next'; import { validateRequest } from '~/backend/auth'; export async function getServerSideProps( context: GetServerSidePropsContext, ): Promise<GetServerSidePropsResult<{ user: User }>> { const cookieData = await validateRequest(context.req, context.res); if (!cookieData.user) { return { redirect: { permanent: false, destination: '/login', }, }; } return { props: { user: JSON.parse(JSON.stringify(cookieData.user)) as User, }, }; }

Middlewareen voi tehdä authentication-tsekkauksen, mutta Next.js:n dokumentaation mukaan se ei välttämättä kannata, koska Lucia tsekkaa session tietokannasta. Toisaalta suorituskykyongelmat eivät tule pitkiin aikoihin minkäänlaiseksi ongelmaksi, eli sikäli ohjauksen voi hyvin laittaa sinne.

However, since Middleware runs on every route, including prefetched routes, it's important to only read the session from the cookie (optimistic checks), and avoid database checks to prevent performance issues.

Tällähän se lähti pelittämään! Kiitos jälleen todella paljon!! :)

Syy tosiaan sille, miksi en itse saanut toimimaan näyttäisi olevan se, että en koskaan exportannut getServerSideProps-funktiota

En ollut siis täysin tajunnut, mitä tällä You can use getServerSideProps by exporting it from a Page Component. tarkoitettiin, mutta nyt tiedän! 😅 👍

anttiasmala · 2024-04-18T10:40:25Z

pages/login.tsx

+    return {
+      props: {
+        user: {},
+      },


Tämän tarkoitus ei ole palauttaa mitään dataa, vaan ohjata käyttäjä pois /login-sivulta takaisin -> / sivulle, jos käyttäjä on jo authentikoitu

Tällä tyhjällä user-objektilla sain korjattua ERR_TOO_MANY_REDIRECTS-virheen 😄

Tarvitseeko tyhjä user objekti palauttaa? Itse en saanut toistettua virhettä seuraavalla getServerSideProps funktiolla

export async function getServerSideProps(context: GetServerSidePropsContext) { const cookieData = await validateRequest(context.req, context.res); if (!cookieData.user) { return; } return { redirect: { permanent: false, destination: '/', }, }; }

anttiasmala · 2024-04-18T10:51:58Z

pages/index.tsx

+        <div
+          className="fixed top-0 left-0 max-w-full w-full h-full bg-transparent"
+          onClick={() => closeUserWindow()}
+        />


Tämän idea on se, että kun käyttäjä klikkaa muuta kuin käyttäjäkuvaketta tai käyttäjä-modalia (missä lukee heidän nimi, sähköposti sekä kirjaudu ulos -nappula) sulkeutuu kyseinen käyttäjä-modal

Tämä on hyvä tapa 👍

samuliasmala

En saanut tätä toimimaan omalla koneella, vaan sain seuraavan virheilmoituksen:

The table `public.Session` does not exist in the current database.

Ilmeisesti Sessio-taulun migraatio on unohtunut PR:stä? Jos lisäät sen niin tsekkaan sitten PR:n.

pages/login.tsx

samuliasmala · 2024-04-20T04:12:25Z

prisma/schema.prisma

+    expiresAt DateTime
+    createdAt DateTime @default(now())
+    updatedAt DateTime @updatedAt


Ihan hyvä olla nuo kentät vaikka eivät pakollisia olekaan.

.env.example

anttiasmala · 2024-04-20T18:36:34Z

Ilmeisesti Sessio-taulun migraatio on unohtunut PR:stä? Jos lisäät sen niin tsekkaan sitten PR:n.

Äsh, joo jäi migraatio tekemättä. Oon käyttänyt tuota npm run prisma db push:ia kehitysvaiheessa, sen takia unohdin tehdä migraation. Meikän moka, pahoittelut! Korjaan saman tien! 👍

EDIT: onko tätä komentoa järkevä käyttää npm run prisma db push?

samuliasmala · 2024-04-20T18:59:29Z

EDIT: onko tätä komentoa järkevä käyttää npm run prisma db push?

Kyllä on! Yleinen tapa on käyttää db push komentoa kun tekee muutosta/PR:ää, ja sitten lopuksi kun PR on valmis tekee migrate dev komennolla migraation. Näin ei tule miljoonaa migraatiotiedostoa testauksista, vaan yksi lopullisesta versiosta.

Prisman dokumentaatiossa:

Use db push to prototype a change to an existing schema, then run prisma migrate dev to generate a migration from your changes (you will be asked to reset)

anttiasmala · 2024-04-20T19:05:59Z

Nyt on korjattu. Testailin itse ja näytti sekä migrate reset että migrate deploy toimivan 👍

samuliasmala

Nyt kaikki lahjaideat näkyvät kaikille käyttäjille, joten kaikkiin api/gifts/* tiedostojen endpointteihin pitää lisätä autentikoinnin tarkistus. Jos käyttäjä ei ole kirjautunut palautetaan 401 Unauthorized. Jos on kirjautunut palautetaan vain kyseisen käyttäjän lahjat.

samuliasmala · 2024-04-24T18:47:43Z

shared/isValidFunctions.ts

+  const checkedEmailAddress = email.toLowerCase().match(emailRegex);
+
+  if (!checkedEmailAddress) {


Itse yhdistäisin nämä rivit seuraavasti (ja sama alla checkedPassword)

Suggested change

const checkedEmailAddress = email.toLowerCase().match(emailRegex);

if (!checkedEmailAddress) {

if (!email.toLowerCase().match(emailRegex)) {

samuliasmala · 2024-04-27T06:17:17Z

backend/auth.ts

+declare module 'lucia' {
+  interface Register {
+    Lucia: typeof lucia;
+    DatabaseUserAttributes: DatabaseUserAttributes;
+    DatabaseSessionAttributes: DatabaseSessionAttributes;
+  }
+}
+interface DatabaseUserAttributes extends User {}
+interface DatabaseSessionAttributes extends CreateSession {}


Rivit 43 ja 44 näyttäisi olevan ihan turhat

Taitaa olla sitä varten jos haluaa lisätä jotain custom-attribuutteja tietokantaan Userille tai Sessiolle mutta tässä tapauksessa tarpeettomia.

Muutama huomio tähän kohtaan: DatabaseUserAttributes kohtaan pitää laittaa Database-tyyppi. Nyt näyttää siltä, että getUserAttributes saa User tyypin, eli sen voisi välittää semmoisenaan eteenpäin. Oikeasti se saa PrismaUser tyypin, jolloin siitä pitää poistaa id ja password kentät (kuten olet tehnyt, eli sun getUserAttributes on implementoitu oikein vaikka tyypitys on väärin).

DatabaseSessionAttributes on sitä varten, jos sessio-tauluun haluaa tallentaa jotain custom-tietoja (esim. mistä maasta sessio on). Meillä ei ole mitään custom-tietoja, eli sen rivin voi poistaa.

Jotta PrismaUser saa importattua import type { User, PrismaUser } from '~/shared/types'; komennolla pitää muokata types.ts tiedostoa, ks. kommentti siellä.

Suggested change

declare module 'lucia' {

interface Register {

Lucia: typeof lucia;

DatabaseUserAttributes: DatabaseUserAttributes;

DatabaseSessionAttributes: DatabaseSessionAttributes;

}

}

interface DatabaseUserAttributes extends User {}

interface DatabaseSessionAttributes extends CreateSession {}

declare module 'lucia' {

interface Register {

Lucia: typeof lucia;

DatabaseUserAttributes: PrismaUser;

}

}

samuliasmala · 2024-04-27T06:22:55Z

backend/auth.ts

+  getUserAttributes({
+    createdAt,
+    email,
+    firstName,
+    lastName,
+    updatedAt,
+    uuid,
+  }: User): User {
+    return {
+      uuid: uuid,
+      firstName: firstName,
+      lastName: lastName,
+      email: email,
+      createdAt: createdAt,
+      updatedAt: updatedAt,
+    };
+  },


GetUserAttributes saa tyypin automaattisesti tuolta declare module:sta eli tässä sitä ei tarvitse laittaa funktion argumenttiin (tai sitten vaihtaa oikeaan eli PrismaUser tyyppiin.

Lisäksi yksinkertaistaisin funktiota seuraavasti:

Suggested change

getUserAttributes({

createdAt,

email,

firstName,

lastName,

updatedAt,

uuid,

}: User): User {

return {

uuid: uuid,

firstName: firstName,

lastName: lastName,

email: email,

createdAt: createdAt,

updatedAt: updatedAt,

};

},

getUserAttributes(user): User {

const { uuid, firstName, lastName, email, createdAt, updatedAt } = user;

return { uuid, firstName, lastName, email, createdAt, updatedAt };

},

samuliasmala · 2024-04-27T06:25:19Z

backend/auth.ts

+export const lucia = new Lucia(adapter, {
+  sessionExpiresIn: new TimeSpan(14, 'd'),
+  sessionCookie: {
+    attributes: {
+      secure: process.env.NODE_ENV === 'production',
+    },
+  },
+  getUserAttributes({
+    createdAt,
+    email,
+    firstName,
+    lastName,
+    updatedAt,
+    uuid,
+  }: User): User {
+    return {
+      uuid: uuid,
+      firstName: firstName,
+      lastName: lastName,
+      email: email,
+      createdAt: createdAt,
+      updatedAt: updatedAt,
+    };
+  },
+});


Laittaisin 1 tunti jos ei valitse "Muista minut" ja 30 päivää jos valitsee sen.

samuliasmala · 2024-04-27T06:36:15Z

backend/auth.ts

+export async function validateRequest(
+  req: IncomingMessage,
+  res: ServerResponse,
+): Promise<{ user: User; session: Session } | { user: null; session: null }> {


Nähdäkseni tässä olisi syytä käyttää Lucian user-tyyppiä, eli seuraavasti olettaen että import tehty import type { Session, User as LuciaUser } from 'lucia';

Suggested change

): Promise<{ user: User; session: Session } | { user: null; session: null }> {

): Promise<{ user: LuciaUser; session: Session } | { user: null; session: null }> {

samuliasmala · 2024-04-28T12:35:58Z

pages/index.tsx

+export async function getServerSideProps(
+  context: GetServerSidePropsContext,
+): Promise<GetServerSidePropsResult<{ user: User }>> {
+  const cookieData = await validateRequest(context.req, context.res);
+  if (!cookieData.user) {
+    return {
+      redirect: {
+        permanent: false,
+        destination: '/login',
+      },
+    };
+  }
+  return {
+    props: {
+      user: JSON.parse(JSON.stringify(cookieData.user)) as User,
+    },
+  };
+}


Jos siirrät funktion toiseen tiedostoon, niin näin pitäisi onnistua (tiedosto kannattaa nimetä paremmin ja laittaa oikeaan hakemistoon):

// index.tsx import { getServerSideProps } from './getServerSideProps'; export { getServerSideProps }; // getServerSideProps.js import { User } from '~/shared/types'; import { GetServerSidePropsContext, GetServerSidePropsResult } from 'next'; import { validateRequest } from '~/backend/auth'; export async function getServerSideProps( context: GetServerSidePropsContext, ): Promise<GetServerSidePropsResult<{ user: User }>> { const cookieData = await validateRequest(context.req, context.res); if (!cookieData.user) { return { redirect: { permanent: false, destination: '/login', }, }; } return { props: { user: JSON.parse(JSON.stringify(cookieData.user)) as User, }, }; }

Middlewareen voi tehdä authentication-tsekkauksen, mutta Next.js:n dokumentaation mukaan se ei välttämättä kannata, koska Lucia tsekkaa session tietokannasta. Toisaalta suorituskykyongelmat eivät tule pitkiin aikoihin minkäänlaiseksi ongelmaksi, eli sikäli ohjauksen voi hyvin laittaa sinne.

However, since Middleware runs on every route, including prefetched routes, it's important to only read the session from the cookie (optimistic checks), and avoid database checks to prevent performance issues.

samuliasmala · 2024-04-28T12:37:12Z

pages/index.tsx

+  }
+  return {
+    props: {
+      user: JSON.parse(JSON.stringify(cookieData.user)) as User,


Ilmeisesti teet deep clonen user objektista? JSON.parse ja stringify avulla? Siihen tarkoitukseen structuredClone on parempi.

samuliasmala · 2024-04-28T13:16:48Z

pages/index.tsx

+            showUserWindow={showUserWindow}
+            user={user}
+            handleLogout={handleLogout}
+            closeUserWindow={() => setShowUserWindow(false)}


Joo tämä on oikein hyvä tapa 👍

samuliasmala · 2024-04-28T16:24:42Z

utils/handleError.ts

+type KnownFrontEndErrorTexts =
+  | 'email was not unique!'
+  | 'invalid credentials!'
+  | 'invalid request body!'
+  | (string & Record<never, never>);
+
+const FRONT_END_HANDLER: Record<KnownFrontEndErrorTexts, string> = {
+  'email was not unique!': 'Sähköposti on jo käytössä',
+  'invalid credentials!': 'Sähköposti tai salasana on virheellinen!',
+  'invalid request body!': 'Sähköposti tai salasana on virheellinen',
+};


Itse tekisin tuon virheen määrityksen näin

const FRONT_END_HANDLER = { 'email was not unique!': 'Sähköposti on jo käytössä', 'invalid credentials!': 'Sähköposti tai salasana on virheellinen!', 'invalid request body!': 'Sähköposti tai salasana on virheellinen', } as const; type KnownFrontEndErrorTexts = keyof typeof FRONT_END_HANDLER;

Kun määrittelyn tekee näin pitää teksti hakea seuraavasti

const responseText = e.response.data.toLowerCase(); const frontendText = FRONT_END_HANDLER[responseText as KnownFrontEndErrorTexts]; if (frontendText) { console.error(frontendText); return frontendText; } else {

samuliasmala · 2024-04-28T16:26:27Z

icons/index.ts

Makuasia, kumpikin toimii hyvin. Itse en yleensä käytä tämmöisiä barrel tiedostoja.

…ction. Changed router.push to window.location.href

anttiasmala added 24 commits April 4, 2024 12:11

Copied pages/login.tsx file from old login branch

7defc17

Fixed imports and deleted unnecessary stuff

f028cfb

Fixed some frontend code in login.tsx

3d680e1

Fixed name attributes in Inputs

7a987a7

Installed lucia and oslo packages

ed507b4

Installed @lucia-auth/adapter-prisma package

44da0e4

Updated favicon.ico with working icon

0e50733

Added Sessions to schema.prisma

43d3108

Changed default password for development only

7aa985d

Rewriting register.tsx. Currently added some debugging console.logs

59b6a17

Copied an example of middleware from lucia-auth's website. Reference: h…

7aadfbc

…ttps://lucia-auth.com/getting-started/nextjs-pages

Copied an example of auth from lucia-auth's website: References: http…

c0cb21a

…s://lucia-auth.com/getting-started/nextjs-pages and https://lucia-auth.com/tutorials/username-and-password/nextjs-pages

Created a new folder pages/api/auth and added register.ts file there …

9d494c1

…to handle registering. Added some basic handler functions there

Added checks if values given in registering are valid or not

4f580c3

Created a file for URLs to images that have been taken from internet …

e7f4640

…so credits can be given easier

Created a custom header check so backend can call backend APIs withou…

de68abf

…t middleware interfering. Most likely will be replaced / deleted, but it works for now in development stage

Created a simple request for registering. Added default values for fi…

0787a77

…rst name etc to make development easier and faster

Commented isEmailValid function out for now

e61837f

Made the CUSTOM_HEADER variable exportable so it does not need to be …

6f33e73

…written multiple times

Removed old createUser function and made userCreatedSuccesfully funct…

a73c274

…ion callable

Added a simple text that will tell if it is in production or not

5eed346

Added functions for checking that given values are valid. Added reque…

21d9f98

…st for user creation

ESLint fixes

6913f2e

Updated .env.example file

2b9c5fd

vercel bot deployed to Preview April 4, 2024 15:32 View deployment

anttiasmala commented Apr 4, 2024

View reviewed changes

public/credits_for_images.txt Outdated Show resolved Hide resolved

anttiasmala commented Apr 4, 2024

View reviewed changes

pages/register.tsx Outdated Show resolved Hide resolved

anttiasmala commented Apr 4, 2024

View reviewed changes

pages/api/auth/register.ts Outdated Show resolved Hide resolved

anttiasmala commented Apr 4, 2024

View reviewed changes

pages/api/auth/register.ts Outdated Show resolved Hide resolved

anttiasmala commented Apr 18, 2024

View reviewed changes

backend/auth.ts Show resolved Hide resolved

anttiasmala commented Apr 18, 2024

View reviewed changes

package.json Show resolved Hide resolved

anttiasmala commented Apr 18, 2024

View reviewed changes

anttiasmala changed the title ~~WIP | Antti/login~~ Antti | kirjautuminen ja rekistöröityminen sekä authentication Apr 18, 2024

anttiasmala commented Apr 18, 2024

View reviewed changes

samuliasmala requested changes Apr 20, 2024

View reviewed changes

Created a migration of Session Model

0c44e77

vercel bot deployed to Preview April 20, 2024 19:05 View deployment

anttiasmala requested a review from samuliasmala April 20, 2024 19:56

Removed unnecessary lines in .env.example

abcb4a6

samuliasmala requested changes Apr 28, 2024

View reviewed changes

anttiasmala added 8 commits April 29, 2024 12:42

Moved handleLogout function from Home function to UserDetailModal fun…

c1678cf

…ction. Changed router.push to window.location.href

Changed the way how frontend error texts are set

00b11da

Combined login and register errors and fixed the imports

300226e

Moved luciaLongSession to .auth file

994ca51

Changed shortLuciaSession to be 1 hour instead of 14 days

5d5d95e

Created a new file getServerSideProps

a1c770b

Changes to backend/auth.ts file

a7861a1

Debugging

1d87410

vercel bot had a problem deploying to Preview May 1, 2024 21:32 Failure


		const { email, password, rememberMe } = req.body as UserLoginDetails;

		const lucia = rememberMe ? luciaLongSession : luciaShortSession;

		const checkedEmailAddress = email.toLowerCase().match(emailRegex);

		if (!checkedEmailAddress) {

	): Promise<{ user: User; session: Session } \| { user: null; session: null }> {
	): Promise<{ user: LuciaUser; session: Session } \| { user: null; session: null }> {

Antti | kirjautuminen ja rekistöröityminen sekä authentication #23

Are you sure you want to change the base?

Antti | kirjautuminen ja rekistöröityminen sekä authentication #23

Conversation

anttiasmala commented Apr 4, 2024 • edited

vercel bot commented Apr 4, 2024 • edited

anttiasmala Apr 18, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anttiasmala Apr 18, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anttiasmala Apr 18, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anttiasmala Apr 18, 2024 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samuliasmala left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anttiasmala commented Apr 20, 2024 • edited

samuliasmala commented Apr 20, 2024

anttiasmala commented Apr 20, 2024

samuliasmala left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

anttiasmala commented Apr 4, 2024 •

edited

vercel bot commented Apr 4, 2024 •

edited

anttiasmala Apr 18, 2024 •

edited

anttiasmala Apr 18, 2024 •

edited

anttiasmala Apr 18, 2024 •

edited

anttiasmala Apr 18, 2024 •

edited

anttiasmala commented Apr 20, 2024 •

edited