--- title: "Workshop i React: Innlogging" url: "https://www.bekk.christmas/post/2024/21/workshop-i-react-innlogging" authors: ["Marcus Haaland"] published: "2024-12-21" updated: "2024-12-21T08:28:19Z" language: "nb-NO" type: "article" tags: ["React", "Frontend"] series: "Workshop i React" --- # Workshop i React: Innlogging Som frontender er det vanskelig å vite hva du trenger å vite om innlogging. Ofte kommer du på et prosjekt hvor innlogging allerede er implementert, og dessuten er det meste av logikken på backend uansett. Likevel er det utfordringer også i frontend du må håndtere for en brukervennlig og sikker løsning. I denne luka lærer du de viktigste konseptene ved innlogging, hands-on. ## Kort fortalt Innlogging i frontend handler om mer enn å sende brukeren videre etter login: du må ta stilling til hvor token lagres, hva som skjer når tilgangen forsvinner, hvordan du beskytter mot Cross Site Scripting, og hvordan du skjuler funksjonalitet brukeren ikke har lov til å bruke. Workshopen gir en hands-on gjennomgang av disse temaene gjennom oppgaver og bonusspørsmål. - **Passer for:** Frontendutviklere som jobber med innlogging - **Fint å kunne fra før:** Grunnleggende React-kunnskap _Generert med KI_ ## Hvorfor bry deg om innlogging? I frontend er det flere spørsmål rundt innlogging du bør kunne svaret på: - Hvor skal vi lagre token? - Hva gjør vi om en bruker mister tilgangen? - Hvordan sikrer vi oss mot Cross Site Scripting? - Hvordan skjule funksjonalitet som brukere uansett ikke har lov til å utføre? Ved å forstå innlogging også fra et frontend-perspektiv, kan vi skape løsninger som både er brukervennlige og trygge. ## Workshop i innlogging I denne workshopen skal vi utforske viktige temaer innen innlogging, som spørsmålene nevnt over. Før du starter, er det noen ting du bør vite om workshopen: - **Oppgavene ligger i src/[oppgave]:** Det er kun disse filene du trenger å endre. Du leser oppgave1 i `Oppgave1.tsx`, og ser fasit i `Fasit1.tsx` og så videre. - **Løs bonusspørsmål**: I tillegg til å løse de rene kodeoppgavene, prøv også å besvare bonusspørsmålene på hver oppgave. Da lærer du mer kontekst til innlogging. Det fins ingen fasit i løsningen for disse oppgavene. - **Hvordan ta workshopen videre**: Reflekter også over forskjeller i din løsning, "fasiten" og kode i eget prosjekt. Er det noen scenarier "fasiten" ikke tar hensyn til mangelfull? Er det noen forenklinger i "fasiten" du har lyst til å ta i bruk? - **Jeg blir veldig glad for tilbakemeldinger**: Om du finner noen feil eller har forslag til forbedringer, gjerne lag et issue, lag en PR eller send meg en melding på [LinkedIn](https://www.linkedin.com/in/marcus-haaland-3706b3162/). 👉 For å starte workshopen, kloner du GitHub-repository, leser readme, kjører opp applikasjonen og leser av oppgavene. Workshopen finner du her: [https://github.com/haalmarc/auth-workshop](https://github.com/haalmarc/auth-workshop) ## Videre lesing - Delba fra Vercel har en lærerik video om innlogging i Next.js, og forklarer en del av konseptene du bør kunne: [https://www.youtube.com/watch?v=N_sUsq_y10U&ab_channel=Delba](https://www.youtube.com/watch?v=N_sUsq_y10U&ab_channel=Delba)