nextjs jwt authentication
1.0.0
Bukti aplikasi konsep untuk menunjukkan otentikasi aplikasi selanjutnya dengan jwt.
Aplikasi ini dibuat dengan asumsi bahwa server rendering dan server API dipisahkan.
Ini menggunakan API ini untuk otentikasi.
Sisi server yang diberikan aplikasi luar biasa. Mereka membuat sweet spot antara aplikasi monolitik dan aplikasi satu halaman yang ditenagai oleh layanan mikro. Tetapi mereka juga menambah kompleksitas pada kreasi mereka. Menjaga keadaan di server dan klien secara sinkron, rute pada klien dan server, memuat data sebelum rendering server, dll. Adalah beberapa hal yang membuat aplikasi kami lebih kompleks. Itulah sebabnya kerangka kerja seperti Next.js ada, untuk menyelesaikan sebagian besar masalah itu. Namun, hal -hal seperti otentikasi diserahkan kepada kita. Ini adalah upaya untuk mengimplementasikan otentikasi berdasarkan JWT. Masalahnya adalah kita tidak dapat menyimpan token di LocalStorage seperti yang akan kita lakukan dengan Spa.
Idenya adalah untuk menerima token dari server di klien, menyimpannya di cookie, dan kemudian setiap kali halaman diterjemahkan di server, kami akan dapat mengakses token dari cookie.
Pengguna mengirimkan permintaan auth dari klien. Dalam tanggapannya, JWT diterima, dan disimpan di Cookie Browser dan Redux Store. Kemudian pengguna memiliki akses ke token dari klien, dan dapat menggunakannya untuk mengakses rute yang dilindungi.
Ketika pengguna membuat permintaan halaman, cookie juga dikirim, sehingga server dapat membacanya. Untuk membacanya, pengguna menggunakan metode siklus hidup getInitialProps , yang disediakan oleh Next.js. Ini mendapatkan argumen - objek konteks yang berisi beberapa properti. Anda dapat membaca lebih lanjut tentang itu di sini. Di properti req , kami dapat mengakses properti headers yang berisi cookie dengan token. Seorang pencipta tindakan dikirim untuk menyimpan token di toko redux, dan aplikasi sekarang memiliki akses ke token lagi.
Pastikan Anda menginstal Node dan NPM.
Pastikan juga Anda menjalankan server API.
git clone https://github.com/alan2207/nextjs-jwt-authentication
cd nextjs-jwt-authentication
npm install # Run in dev mode:
npm run dev
# Run in production:
npm run build
npm start
