• nextjs
  • app-router
  • server-actions
  • sdk

Lägg till Logto-autentisering i din Next.js-applikation med Server Actions

Integrerar Logto-autentisering i din Next.js-applikation med Server Actions.

Sijie
Sijie
Developer

Server Actions presenterar ett förnyat sätt att skapa robusta webbapplikationer utan behov av traditionella REST-API:er. Vi har tidigare diskuterat detta i vår artikel.

Idag är vi glada att tillkännage det officiella stödet för Server Actions i vårt Next.js SDK, trots att det är en experimentell funktion.

För en snabb översikt, kolla in det här exemplet och följ med när vi beskriver hur du integrerar Logto med Server Actions i den här guiden.

Förutsättningar

För att komma igång, se till att du har följande:

  • En körande Logto-instans eller tillgång till ett Logto Cloud-konto.
  • Ett Next.js-projekt med Server Actions-funktionen aktiverad.

Konfigurera Logto

Om du själv hostar Logto, hänvisa till dokumentationen "Kom igång" för att ställa in din Logto-instans.

Öppna Logto Console genom att ange URL:en https://cloud.logto.io/ om du använder Logto Cloud, eller den slutpunkt du har ställt in för självhostning.

Navigera sedan till fliken "Applications" och klicka på "Create application".

Fliken Applications

I modalfönstret som visas, välj "Next.js (App Router)" och ange ett applikationsnamn, t.ex. "Next.js App". Klicka sedan på "Create application".

Skapa applikation

Du kommer att omdirigeras till en handledningssida i Logto. Klicka på "Finish and done" för att fortsätta till sidan med applikationsdetaljer.

Applikationsdetaljer

I avsnittet "Redirect URIs" ange följande värde:

Till exempel, om du hostar Next.js på http://localhost:3000, bör värdet vara:

Spara ändringar

Klicka på knappen "Save Changes" längst ner. När det är lyckat, håll den här sidan öppen eftersom den kommer att vara användbar för Next.js-konfigurationen.

Sätt upp Next.js-applikation

Se till att du har ett projekt med den senaste versionen av Next.js. Om du inte har ett än, kan du följa den officiella installationsguiden för att skapa ett.

Vid tidpunkten för att skriva denna guide, är funktionen experimentell och kräver aktivering i next.config.js

Definiera Logto-biblioteket

Börja med att installera modulen @logto/next med npm enligt följande:

Du kan också använda yarn eller pnpm.

Låt oss sedan skapa några funktioner som "server actions", skapa den nya filen libraries/logto.ts:

I den här filen exporterar vi fyra funktioner för autentiseringssyften. Observera den första raden, "use server" indikerar att koden i filen endast kan köras på serversidan. Vi använder "next/headers" för att hantera sessionsbaserade kakor.

De ovanstående funktionerna vi exporterade kan anropas direkt från klientsidan i React-komponenten. Det är den stora fördelen med att använda Server Actions. Låt oss gå till nästa kapitel för att se hur man använder dessa funktioner.

Implementera logga in och logga ut-knappar

Med autentiseringsfunktionerna på plats, låt oss bygga sidan. Vi kommer att skapa två klientkomponenter för att initiera logga in och logga ut-åtgärder.

Logga in

/app/sign-in.tsx:

Här importerar vi signIn-funktionen som just definierades i föregående kapitel. Trots att koden körs på serversidan, kan denna funktion ändå anropas direkt av <button>-komponenten när en användare klickar på logga in-knappen. Genom att göra detta eliminerar vi behovet av att skriva något REST-API för att hantera inloggningsprocessen. Faktum är att Next.js hanterar "POST"-begäransdispatchelementen åt oss. Vid mottagande av redirectUrl kan vi anropa router.push för att omdirigera till Logtos inloggningssida.

Logga ut

/app/sign-out.tsx:

Utloggningsprocessen liknar inloggningsprocessen.

Förbered en callback-sida

Som en standard OIDC-identitetsleverantör omdirigerar Logto användarna till en callback-URL efter autentisering. Därför måste vi förbereda en callback-sida för att hantera inloggningsresultatet.

/app/callback/page.tsx

Här använder vi en klientkomponent med useEffect, vilket gör det enkelt att visa en "laddar"-sida för bättre användarupplevelse.

Visa användarkontext och säker sida

Låt oss nu göra en minimal hemsida för att visa nyttan med Logto SDK. Skydda vid behov någon resurs från okända användare genom att kontrollera isAuthenticated-värdet och omdirigera till inloggningssidan eller visa felmeddelanden.

app/page.tsx

Som du kan se, är detta en serverkomponent som eliminerar behovet av useEffect och att hantera komplexa tillståndsförändringar.

Slutsats

Serveractions erbjuder ett strömlinjeformat och enkelt sätt att implementera autentisering jämfört med traditionella Next.js-applikationer som förlitar sig på REST-API:er.

Hela kodexemplet kan hittas i detta arkiv: https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample

Varför inte ge Logto Cloud ett försök och uppleva enkelheten i praktiken?