Summary
This chapter demonstrates how to define a server action for handling credential-based sign-in with validation and error handling, and how to integrate that action into a React form component using useFormState to manage form submission and feedback.

General domain of usage
User authentication

Varmistetaan, että kirjautumistoiminto toimii oikein.

### 1. Luo authenticate-toiminto
`actions.ts`-tiedostossa määritä uusi toiminto nimeltä `authenticate`. Tämän toiminnon tulee hyödyntää `signIn`-tiedoston `auth.ts`-funktiota:

### Muokkaa kirjautumislomaketta
Hyödynnä `login-form.tsx `-komponentissa Reactin `useFormState`-hookia palvelintoiminnon kutsumiseen.

Opi rakentamaan moderneja, suorituskykyisiä web-sovelluksia Next.js:llä. Luo projekteja, joissa on jäsennelty ulkoasu, tyylittely ja reititys sujuvaa navigointia varten. Nouda ja näytä dataa tehokkaasti samalla kun optimoit renderöintiä ja suorituskykyä. Toteuta edistyneitä ominaisuuksia, kuten sivutus, CRUD-toiminnot ja globaali haku dynaamisia web-sovelluksia varten. Julkaise Next.js-projektisi, yhdistä ne tietokantoihin ja lisää autentikointi käyttäjätietojen suojaamiseksi.

Käydään läpi, mitä tulee hallita ennen Next.js-kehykseen perehtymistä, mitä tältä kurssilta voi odottaa ja mitä tulet rakentamaan.

Projektin perustaminen, tyylien lisäämistavat sovellukseen sekä visuaalisten osa-alueiden, kuten kuvien, fonttien, sivujen ja asetteluiden käsittely.

Opi luomaan ja hallitsemaan sovelluksesi uusia näkymiä vaivattomasti sekä navigoimaan saumattomasti kaikkien sivujen välillä sisäänrakennetun reititysjärjestelmän avulla.

Ota Next.js-sovellus käyttöön GitHub- ja Vercel-tunnusten avulla. Perusta lisäksi tietokanta, joka toimittaa sovellukselle tarvittavat tiedot.

Pohdi, miten data hankitaan ja esitetään käyttäjälle selkeästi ja tehokkaasti.

Opi toteuttamaan moderneja verkkosivustojen ominaisuuksia, kuten sivutus, CRUD-toiminnot, globaali haku, lomakkeiden validointi ja paljon muuta.

Käyttöliittymän Yhdistäminen Todennuslogiikkaan

Takaisin projektiin

1. Luo authenticate-toiminto

Muokkaa kirjautumislomaketta

Käytännössä

Awesome!

Käyttöliittymän Yhdistäminen Todennuslogiikkaan

Takaisin projektiin

1. Luo authenticate-toiminto

Muokkaa kirjautumislomaketta

Käytännössä