Het toonaangevende bedrijf Banana Security specialiseert zich in het bewaren van geheimen. Hun datacenter staat vol met persoonlijke geheimen van klanten die het te veel moeite vinden om ze zelf te onthouden. Banana Security is al meer dan een jaar van plan haar klanten de mogelijkheid te geven hun gegevens online te bekijken. Dit mag natuurlijk alleen bekeken worden wanneer de gebruiker ingelogd is. Deze implementatie zou eigenlijk verzorgd worden door hun werknemer Tim, maar ze hebben hem helaas moeten ontslaan . Daarom huren ze jou in om de klus te klaren!
Als je het project gecloned hebt naar jouw locale machine, installeer je eerst de node_modules
door het volgende
commando in de terminal te runnen:
npm install
Wanneer dit klaar is, kun je de applicatie starten met behulp van:
npm run dev
of gebruik de WebStorm knop (npm start). Open http://localhost:3000 om de pagina in de browser
te bekijken. Begin met het maken van wijzigingen in src/App.jsx
: elke keer als je een bestand opslaat, zullen de
wijzigingen te zien zijn op de webpagina.
De applicatie heeft op dit moment al vier pagina's met werkende routing:
- Home pagina (
/
) - Profiel pagina (
/profile
) - Sign in (login) pagina (
/signin
) - Sign up (registratie) pagina (
/signup
)
Je gaat de volgende concepten implementeren:
- Je implementeert React Context doormiddel van een custom Provider component (
AuthContext.js
); - Je hebt nog geen echte invoervelden nodig voor het inloggen. Het in- en uitlog-proces is niets meer dan een simpele state-toggle die wordt beheerd in de context:
const [isAuth, toggleIsAuth] = useState(false);
- De navigatiebalk laat alleen een uitlog-knop zien bij
true
(ingelogd) of de inlog- en registratie-knoppen bijfalse
(niet ingelogd). Deze data komt uit de context; - De profielpagina is alleen te bezoeken wanneer de gebruiker is ingelogd;
- Wanneer de gebruiker het inlog-formulier op de Sign in pagina verstuurd, wordt de
login
-functie uit de context aangeroepen. Deze functie doet het volgende:- Zet de state op
true
; - Logt 'Gebruiker is ingelogd!' in de console
- Stuurt de gebruiker door naar de profielpagina
- Zet de state op
- Wanneer de gebruiker op de uitlog-knop drukt, wordt de
logout
-functie uit de context aangeroepen. Deze functie doet het volgende:- Zet de state op
false
; - Logt 'Gebruiker is uitgelogd!' in de console
- Stuurt de gebruiker door naar de homepagina
- Zet de state op
Als je niet zo goed weet waar je moet beginnen, kun je onderstaand stappenplan volgen:
- Maak een context-bestand (
AuthContext.js
) met daarin (je raadt het niet!) eenAuthContext
. - Creer dan het custom Provider-component. Uit dit component return je het echte
AuthContext.Provider
component. - Zorg ervoor dat we het custom Provider-component zometeen om de applicatie kunnen wikkelen door de children property te implementeren.
- Maak een data-object aan die je meegeeft aan de
value
-property en zet daar wat test-data in. - Wrap dit om het
<App />
-component inmain.jsx
- Lees de context uit in één van de pagina-componenten om te kijken of jouw eerste opzet functioneel is (
met
useContext
) - Gelukt? Top. Dan is het tijd om state aan te maken in het custom Provider-component. Noem deze
state-variabele
isAuth
ofisAuthenticated
en zet de initiële waarde opfalse
. Geef de waarde van de state mee aan het data object. - Lees deze authenticatie-status uit in het
<NavBar />
component. Krijg je het te zien in de console? Zorg er dan voor dat je op basis van deze status een inloggen- en registreren-knop laat zien, of alleen een uitlog-knop. - Schrijf een inlog-functie in het custom Provider-component en maak deze beschikbaar in het data-object. In de randvoorwaarden staat beschreven wat deze functie moet doen.
- Maak de knop in het formulier in
SignIn.jsx
functioneel. Als het formulier wordt gesubmit, roep je de login-functie uit de context aan! - Schrijf een uitlog-functie in het custom Provider-component en maak deze beschikbaar in het data-object. In de randvoorwaarden staat beschreven wat deze functie moet doen.
- Maak de knop in de navigatie (
NavBar.jsx
) functioneel. Als erop wordt geklikt, roep je de logout-functie uit de context aan! - Ten slotte kun je de route naar
/profile
beveiligen met een private route.
Bonus 1:
- Maak alvast invoervelden in het login- en registratie-formulier die de gebruiker zou kunnen invullen. Voor het inlog-formulier zijn dat emailadres en wachtwoord. Voor het registratieformulier zijn dat emailadres, wachtwoord en gebruikersnaam. Je hoeft nog niets met de ingevulde data te doen, dit komt pas volgende les!
Bonus 2:
- Breidt de state uit van een boolean naar een object. De initiele waarde moet er zo uitzien:
{isAuth: false, user: ''}
- Nu de state een object is, werkt het togglen van
isAuth
natuurlijk ook anders in de login- en logout-functie. Pas dit aan zodat het weer werkt! - Zorg ervoor dat de inhoud van de state (dus de keys
isAuth
enuser
) worden doorgegeven in het data-object. - Zorg er dan nu voor dat het emailadres wordt meegegeven bij het aanroepen van de login functie vanuit
SignIn.jsx
- Zorg ervoor dat er in het custom Provider-component voor gezorgd wordt dat dat emailadres wordt opgeslagen onder
user
in de state. - Laat, als er een gebruiker is ingelogd, het emailadres zien in de navigatie.