Voeg Logto-authenticatie toe aan je Next.js-applicatie met Serveracties

Serveracties bieden een verfrissende manier om robuuste webapplicaties te creëren zonder de noodzaak van traditionele REST API's. We hebben dit eerder besproken in ons artikel.

Vandaag zijn we verheugd om de officiële ondersteuning voor Serveracties te aankondigen in onze Next.js SDK, ondanks dat het een experimentele functie is.

Voor een snel overzicht, bekijk dit voorbeeld en volg mee terwijl we in deze gids uitleggen hoe je Logto met Serveracties kunt integreren.

Vereisten#

Om te beginnen, zorg ervoor dat je het volgende hebt:

• Een actieve Logto-instance of toegang tot een Logto Cloud-account.
• Een Next.js-project met de Serveracties-functie ingeschakeld.

Configureer Logto#

Als je Logto zelf host, raadpleeg dan de Logto "Aan de slag"-documentatie om je Logto-instance in te stellen.

Open de Logto Console door de URL https://cloud.logto.io/ in te voeren als je Logto Cloud gebruikt, of het eindpunt dat je hebt ingesteld voor zelf-hosting.

Ga vervolgens naar het tabblad "Toepassingen" en klik op "Applicatie maken".

Kies in het modaalvenster dat verschijnt "Next.js (App Router)" en geef een applicatienaam op, zoals "Next.js App". Klik dan op "Applicatie maken”.

Je wordt naar een tutorialpagina in Logto geleid. Klik op "Voltooien en klaar" om door te gaan naar de pagina met applicatiedetails.

Voer in het gedeelte "Redirect-URI's" de volgende waarde in:

Bijvoorbeeld, als je Next.js host op http://localhost:3000, moet de waarde zijn:

Klik op de knop "Wijzigingen opslaan" onderaan. Als dat gelukt is, houd deze pagina open omdat het nuttig zal zijn voor de configuratie van Next.js.

Stel de Next.js-applicatie in#

Zorg ervoor dat je een project hebt met de nieuwste versie van Next.js. Als je er nog geen hebt, kun je de officiële installatiegids volgen om er een te maken.

Op het moment van schrijven van deze gids is de functie experimenteel en vereist activatie in de next.config.js

Definieer de Logto-bibliotheek#

Begin met het installeren van de @logto/next-module met npm als volgt:

Je kunt ook yarn of pnpm gebruiken.

Laten we vervolgens enkele functies maken als "serveracties", maak het nieuwe bestand libraries/logto.ts:

In dit bestand exporteren we vier functies voor authenticatiedoeleinden. Let op de eerste regel, "use server" geeft aan dat de code in het bestand alleen aan de serverzijde kan worden uitgevoerd. We gebruiken "next/headers" om cookiebased-sessies te beheren.

• Referentie voor "use server": https://react.dev/reference/react/use-server
• Referentie voor het gebruik van "next/headers" voor cookiebeheer: https://nextjs.org/docs/api-reference/next/headers

De hierboven geëxporteerde functies kunnen direct worden aangeroepen vanuit de clientzijde React-component. Dat is het belangrijkste voordeel van het gebruik van Serveracties. Laten we naar het volgende hoofdstuk gaan om te zien hoe we deze functies kunnen gebruiken.

Implementeer inlog- en uitlogknoppen#

Met de authenticatiefuncties op hun plaats, laten we de pagina construeren. We zullen twee client-componenten maken om de inlog- en uitlogacties te initiëren.

Inloggen#

/app/sign-in.tsx:

Hier importeren we de signIn-functie die zojuist is gedefinieerd in het vorige hoofdstuk. Hoewel de code aan de serverzijde wordt uitgevoerd, kan deze functie nog steeds direct worden aangeroepen door de <button>-component wanneer een gebruiker op de inlogknop klikt. Door dit te doen, elimineren we de noodzaak om een REST API te schrijven om het inlogproces af te handelen. In feite handelt Next.js de "POST"-verzoekdispatcher-details voor ons af. Na ontvangst van de redirectUrl, kunnen we router.push aanroepen om door te verwijzen naar de Logto inlogpagina.

Uitloggen#

/app/sign-out.tsx:

Het uitlogproces is vergelijkbaar met het inlogproces.

Bereid een callbackpagina voor#

Als een standaard OIDC-identiteitsprovider leidt Logto gebruikers om naar een callback-URL na authenticatie. We moeten daarom een callbackpagina voorbereiden om het resultaat van de aanmelding te verwerken.

/app/callback/page.tsx

Hier gebruiken we een clientcomponent met useEffect, waarmee het eenvoudig is om een "laad"-pagina weer te geven voor een betere gebruikerservaring.

Toon gebruikerscontext en beveiligde pagina#

Laten we nu een minimalistische startpagina maken om het nut van de Logto SDK te tonen. Bescherm indien nodig een bron tegen onbekende gebruikers door de waarde isAuthenticated te controleren en door te verwijzen naar de inlogpagina of foutberichten weer te geven.

app/page.tsx

Zoals je kunt zien, is dit een servercomponent die de noodzaak elimineert voor useEffect en het beheren van complexe toestandveranderingen.

Conclusie#

Serveracties bieden een gestroomlijnde en eenvoudige manier om authenticatie te implementeren in vergelijking met traditionele Next.js-applicaties die vertrouwen op REST API's.

Het hele codevoorbeeld is te vinden in deze repository: https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample

Waarom probeer je Logto Cloud niet eens en ervaar je hoe eenvoudig het in de praktijk is?