Тёмный

Fullstack App with Session-Based Auth in Django & React.js (Vite)  

Bek Brace
Подписаться 28 тыс.
Просмотров 18 тыс.
50% 1

🚀 Welcome to the latest RU-vid tutorial on django-react auth system!
Learn how to build a secure Django session-based authentication system with Django, and React via Vite! 🔒💻
In this comprehensive tutorial, we'll cover everything you need to know about session-based authentication and why it's essential for securing your web applications. We'll also dive into critical security topics like XSS and CSRF, ensuring you have a solid understanding of web security best practices.
🍪 In the first 10 minutes, we'll break down the differences between token-based authentication and cookie 🍪 session-based authentication. You'll gain insights into the strengths and weaknesses of each approach, helping you make informed decisions for your projects.
🛡️ We'll also explore security threats like Cross-Site Scripting (XSS) and Cross-Site Request Forgery (CSRF) and discuss how session-based authentication mitigates these risks.
Here's what you can expect in the tutorial:
1️⃣ Creating a Django Backend:
We'll start by setting up the Django backend, writing the necessary code to handle user authentication.
2️⃣ Scaffolding React with Vite:
Next, we'll show you how to scaffold a React application using the lightning-fast Vite tool. This will be the foundation of our frontend.
3️⃣ Styling with Bootstrap:
We'll enhance the user interface of our application by incorporating Bootstrap for sleek and responsive styling.
4️⃣ Testing the Authentication System:
Finally, we'll put our session-based authentication system to the test.
You'll see how CSRF tokens and session IDs work, and we'll demonstrate how the authentication behavior changes when users log in and log out.
⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰
⏰Timestamps:
⏰ 00:00 - Introduction
⏰ 00:48 - Session Based Auth Vs Token Based Auth
⏰ 02:29 - What is a Token ?
⏰ 03:22 - Security / XSS / CSRF
⏰ 05:47 - Build Django backend
⏰ 19:13 - Server Migration
⏰ 19:31 - Create Superuser for Admin Board
⏰ 20:18 - Django security settings
⏰ 22:17 - End of Django code
⏰ 22:29 - Subscribers Recognition
⏰ 22:46 - Scaffolding React using Vite
⏰25:26 - Coding App.jsx
⏰41:00 - Debugging in process!
⏰44:32 - Where is Bootstrap link ?
⏰44:42 - Setting up bootstrap
⏰46:40 - End of React code
⏰46:50 - Static settings in React
⏰47:10 - App Building with npm run build
⏰47:56 - Static settings in Django
⏰50:33 - Place Frontend folder in Django folder
⏰51:08 - Testing
⏰51:24 - Debugging
⏰52:13 - More Debugging
⏰52:28 - App Running / Demonstration
⏰54:14 - Outro
⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰⏰
🔗 GitHub Repository: github.com/BekBrace/Django_Re...
⚠️ It’s very easy to help the channel! ⚠️
➊ Like 👍 or 👎 the video
➋ Write a comment 💬 under the video (I answer almost everyone)
➌ Send video ✉️ to friends via social networks
➍ Watch the rest of the videos 🎥 on the channel.
✔️ Every completed item makes the channel better!
Thanks friends! 🤝 🤗 👐
📱 Follow us on Social Media:
🔗 Telegram Channel: t.me/bekbrace
🔗 Instagram: / bek_brace
🔗 Twitter: / bekbrace
Whether you're a seasoned developer or just starting with web development, this tutorial is packed with valuable insights and hands-on coding experience. By the end, you'll have a robust authentication system in place, fortified against common security threats.
Don't miss out on this exciting tutorial! Hit the 'Subscribe' button, turn on notifications 🔔, and let's dive into the world of secure web authentication with Django, React, and Vite! 💪🔐💻
#Django #React #Vite #Authentication #WebSecurity #Tutorial #Development #Coding #WebDev #SessionAuth #Bootstrap #CSRF #XSS #SubscribeNow
Join this channel to get access to perks:
/ @bekbrace

Наука

Опубликовано:

 

27 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 71   
@keshavvyas2885
@keshavvyas2885 6 месяцев назад
Amazing, was looking everywhere regarding how to integrate react (vite) wit django, you made it so simple. The main part was including base: '/static/' in vite file, that made the difference which I was not able to find anywhere else.... Thanks man!!!!!
@BekBrace
@BekBrace 6 месяцев назад
You are very welcome, my friend, glad it helped you :)))))
@svetlana9699
@svetlana9699 8 месяцев назад
Thanks Bek! Your tutorials are useful as always
@BekBrace
@BekBrace 8 месяцев назад
thank you so much
@solday6228
@solday6228 3 месяца назад
Thank you very much, kind person, I definitely like and subscribe, it helped me a lot with the Vita assembly
@BekBrace
@BekBrace 3 месяца назад
Thank you so much, this makes me so happy 😊🙏
@semsemakitchen7772
@semsemakitchen7772 7 месяцев назад
Very nice work great work
@MPAXEL
@MPAXEL 8 месяцев назад
Thank you so much for this great tutorial !!
@BekBrace
@BekBrace 8 месяцев назад
thank you so much
@georgesamuel3774
@georgesamuel3774 7 месяцев назад
Great Job as usual !!!! Thanks a a lot Bek !
@BekBrace
@BekBrace 2 месяца назад
Thank you so much, brother
@jieclarkdev
@jieclarkdev 3 месяца назад
Sir please make a course about django full stack , your teaching is straightforward than other youtubers
@BekBrace
@BekBrace 3 месяца назад
Thank you my friend. You mean more tutorials with Django in full stack apps ?
@jieclarkdev
@jieclarkdev 3 месяца назад
@@BekBrace yes sir tutorials rather sir
@jieclarkdev
@jieclarkdev 3 месяца назад
sir when I logged in it shows an error on console Error: Internal Server Error at isResponseOk (index-5369d346.js:45:5202)
@Tussu17
@Tussu17 7 месяцев назад
Which one is more convenient to create django form, CreateView or forms.ModelForm? When to use which one? Please help!
@thearong_5853
@thearong_5853 2 месяца назад
best tutorial never have
@BekBrace
@BekBrace 2 месяца назад
never ? :D Thanks my friend
@juanpedroreyesornelas
@juanpedroreyesornelas 4 месяца назад
I'm amazed by the fact that at minute 10:10 you wrote "passowrd" instead of "password" and it worked the same way
@juanpedroreyesornelas
@juanpedroreyesornelas 4 месяца назад
lmao, I just found out that it was because the login from the frontend wasn't used haha
@SebastianTapiaqweasd
@SebastianTapiaqweasd 4 месяца назад
52:03 I felt that! One of the worst feeling, correct something and still not working!
@BekBrace
@BekBrace 4 месяца назад
Yeah, so frustrating and sometimes I feel it's better to sell potatoes than to work in programming !
@inteliconn995
@inteliconn995 7 месяцев назад
Thanks!
@BekBrace
@BekBrace 7 месяцев назад
You're welcome! Thanks for watching!
@volodyslove
@volodyslove 7 месяцев назад
Thanks a lot😁
@BekBrace
@BekBrace 7 месяцев назад
You're welcome 🤗
@ahcenebelhadi955
@ahcenebelhadi955 4 месяца назад
what's the thing that shows the details of the render method at 19:14 ? thanks for the video.
@madhurchaturvedi5551
@madhurchaturvedi5551 8 месяцев назад
Thanks Bro
@BekBrace
@BekBrace 8 месяцев назад
You are very welcome, Madhur :
@codedjango
@codedjango 8 месяцев назад
Nice....first time seeing a react tutorial using a class based component in React....phew!! Good to know how simple it is using class based components, but not sure why the whole world is running after functional based components...thanks anyways 👍 ....also please share the correct github repo link ...its not accessible to me....thank you
@BekBrace
@BekBrace 8 месяцев назад
Cheers! repo is working fine now, it was set to private, now it's public
@betadeveloper3519
@betadeveloper3519 5 месяцев назад
Thank you for the video, i followed it and about to launch my project, however, my images are not being served from my dist. it shows 404 page. is there a separate config for images?
@BekBrace
@BekBrace 5 месяцев назад
Yes. Find a video on the channel about rendering css, javascript and images in Django | this should answer your question.
@JasonNgai-zk9fp
@JasonNgai-zk9fp 2 месяца назад
I encounter a problem, the response of .js in the index.html type is text/plain, how can I solve this problem?
@gsmtechzambia3985
@gsmtechzambia3985 Месяц назад
Could you also show how you access the cookie when httponly is set to true for both csrf and session?
@BekBrace
@BekBrace 24 дня назад
That would require a separate video, I don't promise that soon, but I will do it
@navaneeth9103
@navaneeth9103 9 дней назад
how to test out api integrations while in development
@farzadmf
@farzadmf 8 месяцев назад
Question: what's the thing showing auto-complete menu for the terminal command history?
@BekBrace
@BekBrace 8 месяцев назад
Take a look to my video on how to customize powershell, you can customize your terminal exactly like mine
@farzadmf
@farzadmf 8 месяцев назад
Thank you; will take a look
@user-vz4zs2tk1n
@user-vz4zs2tk1n 6 месяцев назад
why did you use class based component instead of function based component in react?
@BekBrace
@BekBrace 6 месяцев назад
I chose to use a class-based component instead of a function-based component in React because I needed to manage local component state, and class components provide a straightforward way to do that using the state object. Additionally, I found the lifecycle methods of class components helpful for handling actions like component mounting and updates. While functional components with hooks are popular now, in this case, a class component felt like the more straightforward and familiar choice for the specific needs of the component, but feel free to use function based component
@montu94
@montu94 7 месяцев назад
Would have been better to see this with AllAuth rather than the custom Auth app you built. Django AllAuth + Django REST is pretty much the standard for Django.
@BekBrace
@BekBrace 7 месяцев назад
🙏Thank you for the feedback on the tutorial. Your suggestion is very valuable, and I might turn it into a tutorial.✨
@montu94
@montu94 7 месяцев назад
@@BekBrace Awesome, waiting for it!
@mkbrothers2348
@mkbrothers2348 2 месяца назад
Sir my frontend content is not visible in django local host
@adityaprakashgupta
@adityaprakashgupta 6 месяцев назад
Which terminal settings you are using?
@BekBrace
@BekBrace 6 месяцев назад
Watch my "Customize powershell terminal " video
@user-gz5bs6qf7o
@user-gz5bs6qf7o 2 месяца назад
What's theme you using in this video?
@BekBrace
@BekBrace 2 месяца назад
i think Kanagwa, i don't remember
@user-gz5bs6qf7o
@user-gz5bs6qf7o 2 месяца назад
@@BekBrace Thank you
@mkbrothers2348
@mkbrothers2348 2 месяца назад
Sir i have a error shows index-5369d46.js not found
@BekBrace
@BekBrace 2 месяца назад
Hey brother, I'll look into that error tomorrow and get back to you with the answer 🙂
@amirmatrix9134
@amirmatrix9134 Месяц назад
amir is also my name xd luv ya m8 💪
@BekBrace
@BekBrace Месяц назад
Awesome brother 😎
@theweakmaybegoodbuttheys-oh3zo
@theweakmaybegoodbuttheys-oh3zo 6 месяцев назад
20:40 ,27:04 ,
@BekBrace
@BekBrace 5 месяцев назад
?
@theweakmaybegoodbuttheys-oh3zo
@theweakmaybegoodbuttheys-oh3zo 5 месяцев назад
for my personal reference@@BekBrace
@beetbeatbitlive324
@beetbeatbitlive324 3 месяца назад
@@BekBrace He's putting timestamps to watch later
@BekBrace
@BekBrace 3 месяца назад
Ah ok, sorry 🙂
@BekBrace
@BekBrace 3 месяца назад
Got it, thank you 🙂
@beetbeatbitlive324
@beetbeatbitlive324 3 месяца назад
trying to follow this tutorial i get this error: Forbidden (CSRF cookie not set.): /api/login/
@BekBrace
@BekBrace 3 месяца назад
Thanks for your question, i can't however check your code, maybe you missed something out; you typically need to ensure that your client application includes the CSRF token with the request | Check that and let me know
@JasonNgai-zk9fp
@JasonNgai-zk9fp 2 месяца назад
I encounter a problem, the response of .js in the index.html type is text/plain, how can I solve this problem?
Далее
LISA - ROCKSTAR (Official Music Video)
02:48
Просмотров 31 млн
You don't need a frontend framework
15:45
Просмотров 107 тыс.
Django + Vite: The simple way
30:20
Просмотров 18 тыс.
Vite and Module Federation Makes Micro-Frontends EASY!
27:36
TypeScript Origins: The Documentary
1:21:36
Просмотров 274 тыс.
React-Vite & Django: 2 Powerful Integration Techniques!
40:36
Самый СТРАННЫЙ смартфон!
0:57
Просмотров 31 тыс.
iOS 18 vs Samsung, Xiaomi,Tecno, Android
0:54
Просмотров 92 тыс.