Next.js and Django JWT Authentication | Part 2 - Frontend
🔥 Subscribe to my YouTube + Turn on Notification Bells!
👉 / @bryanberk
Final project code:
Next.js Frontend: https://github.com/linkedweb/full-auth
Django Backend: https://github.com/linkedweb/full-aut...
Hey, Bryan here. I share videos that help web developers up their development skills!
Today I'll be sharing the second of two parts of a tutorial series showing you how to implement json web token authentication using Next.js 13 with the app router, TypeScript, Redux Toolkit and RTK Query, Tailwind CSS and Headless UI, Django with the Django REST Framework, and with a Postgres database in production. This app will also include oauth2 login with google and facebook oauth2, and we'll be doing a digitalocean deployment of this application.
Here is an overview of the things you will learn in this tutorial project:
1. How to set up jwt authentication using Next.js 13 with the app router for the frontend, and Django with the Django REST Framework for the backend.
2. How to store jwt credentials in httponly cookies and how to handle cookies getting sent cross-origin.
3. How to set up Google and Facebook OAuth2 login.
4. How to set up account activation and password reset.
5. How to use Redux Toolkit along with RTK Query to implement state management, client-side data fetching and caching, and automatic re-authorization.
6. How to use TypeScript, Tailwind CSS, and Headless UI with Next.js 13.
7. How to deploy this stack on digitalocean using digitalocean app platform, digitalocean spaces, digitalocean domain management, and AWS Simple Email Service for managing sending of emails.
8. And more!
Timestamps
0:00 - Backend Setup
9:40 - Next.js Initial Detup
25:03 - Redux Toolkit
43:09 - RTK Query
1:08:36 - Account Registration
1:37:17 - Form Refactor
1:58:33 - Account Activation
2:05:50 - Account Login
2:21:40 - Navbar
2:51:41 - Footer
2:52:59 - Home Page
2:56:39 - Forgot Password
3:13:59 - Dashboard Page
3:24:28 - Authorized Route Protection
3:29:40 - Not Found Page
3:31:35 - Google & Facebook OAuth2
3:55:53 - Code Cleanup
4:08:58 - Digitalocean Deployment
4:24:31 - Outro
To stay up to date with the best web development content, make sure you subscribe to My YouTube channel Today!
Documentation links used in the video:
Next.js: https://nextjs.org/docs
Tailwind CSS: https://tailwindcss.com/docs/installa...
Tailwind UI: https://tailwindui.com/components?ref...
Redux Toolkit: https://redux-toolkit.js.org/introduc...
Headless UI: https://headlessui.com/
Heroicons: https://heroicons.com/
React Icons: https://react-icons.github.io/react-i...
React Toastify: https://www.npmjs.com/package/react-t...
Google Cloud: https://console.cloud.google.com/
Developers Facebook: https://developers.facebook.com/
AWS: https://aws.amazon.com/