No video :(

How to add Two-Factor Authentication to Laravel Fortify SPA - Laravel 2FA

Подписаться 53 тыс.

Просмотров 10 тыс.

50% 1

In this video, we add a two-factor authentication feature to the SPA. Adding two-factor authentication can be a little tricky to the SPA because we are not rendering any views from Laravel, instead, the rendering & routing is done on the SPA. Luckily Laravel Fortify is flexible enough to be able to add this feature to the SPA.
🤝 You can support me by giving my videos a 👍 & by subscribing to the channel ✔️
--- Source Code ---
Back-End (Laravel): github.com/gge...
Front-End (Next.JS): github.com/gge...
-- Laravel Fortify Without Jetstream Series --
Laravel Fortify Without Jetstream Feature - • Laravel Fortify SPA Au...
Add Two-Factor Authentication Feature - • How to add Two-Factor ...
Add User Registration Feature - • How to add User Regist...
Add Account Profile & Password Updates Feature - • How to add Account Pro...
Add Password Reset Feature - • How to add Password Re...
Authenticate Mobile App With Fortify & Sanctum - • How to authenticate Mo...
Updates to Laravel Fortify - • Updates to the Laravel...

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

22 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 61

@Stannytrawden 2 года назад

One of the clearest and most concise tutorials I have ever watched. This series of videos enabled me to implement all of the Laravel authentication methods on a SPA backend I am building in a short afternoon. I have sent the link to the front end person.

@ProgramWithGio 2 года назад

Really glad to hear that. Thank you 🙌

@ahmedkamel7909 3 года назад

I'm working on package to add vue stack to jetstream without inertia or livewire and your explanation explained to me a lot of things, thank you very much

@ProgramWithGio 3 года назад

Glad it was helpful 👍

@umairsaeed5925 Год назад

Superb Just amazing I was searching for this because two factor challenge was not triggering

@ProgramWithGio Год назад

Thank you 🙌

@kickass1179 3 года назад

awesome video...I wish I've seen this before I implemented 2FA in my own ways :D

@ProgramWithGio 3 года назад

Thank you. That's ok though, I'm sure you learned a lot while implementing it your own way, that's the best way to learn :).

@dr-md6df 2 года назад

That's a great tutorial. I don't use react, but vue, and thanks to your detailed explanation of the steps I had no problem at all to port this to Vue (which is not rocket science 😀).

@ProgramWithGio 2 года назад

That's awesome. Thank you 💙

@perfect.stealth 2 года назад

The session part in the end really confused me. Either way, thanks for making this understandable

@ProgramWithGio 2 года назад

Feel free to DM me on Twitter if you have any questions.

@tanzimibthesam5861 3 года назад

Awesome need one with Vue

@ProgramWithGio 3 года назад

Thank you. Unfortunately, I'm not familiar with Vue yet, hopefully soon. The logic is the same though, instead of the react components you would create vue components, the logic doesn't change. The main idea is to make the requests to the correct endpoints

@g.o.3262 3 года назад

Is there a way to ask the user to input the code again to double-protect specific routes? For example, before making the payment. I understand that I need to make and set a middleware on those routes, and somehow invoke the 2FA challenge. But I don't see any helpful method for this task.

@ProgramWithGio 3 года назад

That's a good question. I have not personally tried it but there should be a way probably using middleware or maybe having a custom middleware that does the check. Took a note on this and might play around with it & make a video about it if I get it to work

@memack101 2 года назад

Thank you.

@ProgramWithGio 2 года назад

You're welcome!

@akhileshkumar-iu9uq 10 месяцев назад

Hi, Need to know how to check from method wheather token is expired or not

@ProgramWithGio 10 месяцев назад

User model has token related methods, check the documentation laravel.com/docs/10.x/sanctum

@cristianmerli5050 2 года назад

Thank you for this video, it took me a while to find one that uses Fortify with an API project and React, exactly my scenario. There is one thing I don't understand yet, how do you get a new OTP code every time? How is it sent to your device?

@ProgramWithGio 2 года назад

If you mean the authenticator code that is given by the authenticator app like google authenticator

@cristianmerli5050 2 года назад

@@ProgramWithGio That's right. Stupid question, but at this point can anyone with the username and password get a QR code and authenticate? How is it ensured that only my phone can get a valid QR code? Also when I do a DELETE '/user/two-factor-authentication' i get 405 method not allowed. I am trying from postman.

@ProgramWithGio 2 года назад

You only scan QR code when adding 2FA, not all the time. About issue with postman is that the only endpoint that gives that error? I assume same errors are thrown for other endpoints as well since postman might not be authenticated properly

@cristianmerli5050 2 года назад

@@ProgramWithGio All the other enpoints with the 'auth:sanctum' middleware work. for example i can also create the two-factor-secret. it's just the delete. from a React app instead, i get CSRF mismatch even when I do a POST to 'user/two-factor-authentication'

@ProgramWithGio 2 года назад

@@cristianmerli5050 how is your route registered, it's hard to know without debugging and seeing the code. I would check how the route is registered & make sure that route exists, run artisan route:list to check of delete route exists, it should be delete and not post

@WeeLiem 2 года назад

Hi sir, did you found any solution of reseting the session after entered the incorrect 2FA code instead of redirect back to login page again?

@ProgramWithGio 2 года назад

Hey, not really. Haven't tried it recently. If I get some free time I'll try to look into it again, there might even be a solution by Laravel by now

@farshixpg 2 года назад

Hi , is this way need session ? I need google 2FA and other fortify options without session for stateful front end or mobile app . Can i do this with fortify or should try other way ?

@ProgramWithGio 2 года назад

I haven't tried on token based but I think you should be able to use token based auth for 2FA

@farshixpg 2 года назад

@@ProgramWithGio tnx for answer , but how work facebook , instagram or other big projects on mobile app with 2FA and merge this with others methods like sms , call , QR scan on authenticator app , conrifm on gmail … i think they use microservice and token base but they have 2FA and other options . I know that they have very big scale and custom framework and webservers but they did handle all new authetication methods with cross-platform support like web , native mobile app , spa … now if we use fotify , we have many option for web and spa in same domain that works with sessions but when we use stateful front like web in other domain or service , or mobile apps we cant use sessions in rest api so we cant use fortify . I read many site and check many packages i found laravel-jwt , laravel google 2FA and google backup code php , … i think i should wtite my custom token-base auth system with thes packages .

@ProgramWithGio 2 года назад

@@farshixpg sanctum works for both stateful and stateless. In these videos I'm using Sanctum & Fortify. So if you use both you could make it work for token based authentication.

@HenryDavidLie 3 года назад

i am managed to enable 2FA but when I'm login, there is no json response {two_factor: true}, what should I do?

@ProgramWithGio 3 года назад

Make sure feature is enabled in Fortify's config file. Also make sure your user has 2FA enabled

@HenryDavidLie 3 года назад

@@ProgramWithGio fix it with commenting Auth::routes() from laravel/ui, i am using it because i have separate admin cms and it using laravel ui, so now i just need to modify my admin cms login because I can’t use laravel ui login anymore lol 🤣 Thankyou for great video! It’s helped me alot 👍😁

@ProgramWithGio 3 года назад

@@HenryDavidLie awesome, glad to hear you got it fixed. You're welcome & thank you 🙌

@homayoonsoheyli9175 3 года назад

Is csrf middleware still working when u move /login and /logout to api.php? in this scenario when i send request to /api/login, csrf token doesn't needed.

@ProgramWithGio 3 года назад

Yea it should be working. Before you send request to api/login you should first send request to initialize the csrf cookie

@homayoonsoheyli9175 3 года назад

@@ProgramWithGio if I send request to /api/login, it checks auth credentials immediately, without checking csrf middleware. if auth credentials was Not OK then it returns status: 422 - if auth credentials was OK then it returns status:500, message: "Session store not set on request". btw before that, if i send (Or don't send) request to init csrf cookie, it returns status:204 and sets cookie on subsequent requests. and still message: "Session store not set on request" for /api/login I'm really confused!

@ProgramWithGio 3 года назад

@@homayoonsoheyli9175 what's your session driver set to. This looks like a configuration issue. Also make sure in your Kernel.php for api middleware group the Ensure middleware is on the top of the list

@homayoonsoheyli9175 3 года назад

Everything is ok, the problem was Postman request. I figured out this problem to Setup Postman based on m.ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-QwjzjksfLMo.html

@ProgramWithGio 3 года назад

@@homayoonsoheyli9175 great. Glad you figured it out 👍

@mikro63tv94 3 года назад

I'm getting Session issue when I put the Login Post route from web.php to api.php. Why is that?

@mikro63tv94 3 года назад

also your code is different on your github repo.

@mikro63tv94 3 года назад

I'm not sure why uor login route works. when the documentation says it should be in web. "If you are attempting to use Laravel Fortify to authenticate an SPA, you should use Laravel's default web guard in combination with Laravel Sanctum." laravel.com/docs/8.x/fortify

@ProgramWithGio 3 года назад

@@mikro63tv94 what error are you getting? Note that there was no documentation for Fortify at the time I made these videos. The code on github is the final version, there are more videos in this series which add & make changes to the repo, so after you complete series you can see the final working version on github. There is no issue in using api routes, I prefer to have my routes prefixed with /api because when building SPA I'm building api in Laravel. Sure you can have it in web but it works just fine with api as long as you set up middleware properly. If you give me the exact error you are getting I might be able to help you 👍

@ProgramWithGio 3 года назад

There were changes in Fortify since I made these videos and I explain some of those changes in the last video in the series, so I would advise to watch series entirely including the video about those changes. I removed Fortify routes entirely because it's not needed, Fortify added support to prefix routes and disable views.

@ProgramWithGio 3 года назад

@@mikro63tv94 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-2a2FFg40zFI.html this is the one and as you notice I'm using web middleware there and not api for fortify routes because I no longer define these routes myself. Hope that helps

@shaungbhone8368 3 года назад

I need TWOFA with Email, not Qrcode. Please recommend.

@ProgramWithGio 3 года назад

That's simple, you don't need Laravel Fortify for that. You can just add 2 new columns to the users' table, one for code & the other for expiration. When the user tries to log in generate the code & send via email & ask the user to enter the code. Use the code entered to authenticate the user.

@shaungbhone8368 3 года назад

@@ProgramWithGio what about Enable and disable?

@ProgramWithGio 3 года назад

@@shaungbhone8368 Enable/Disable user? You could add is_active flag on users table & toggle that whenever you need to. Then add a middleware or check on login to see if user is disabled & only allow user to log in if their user is enabled.

@shaungbhone8368 3 года назад

@@ProgramWithGio I am a beginner! please do a tutorial for this. Thanks.

@ProgramWithGio 3 года назад

@Shaung Bhone no problem, I'll be making a Laravel series soon