Building a Basic Ionic 4 Login Flow with Angular Router

[@galaxies_dev]

Want more? Check out some real Ionic clones here: kzbin.info/aero/PLNFwX8PVq5q5K_ztYB5umsEu9p6SOQQSb Make sure to subscribe for more! kzbin.info_?sub_confirmation=1

[@grantw6041]

This has given me a huge head start on my current project. Thank you for making this material free and easy to access!

[@galaxies_dev]

Thank you so much Grant, always happy to help!

[@renatoniola1187]

nice Tutorial thanx, P.S. you are the only tutorial in my life that I had to slow down , normally I speed up to 1.25 / 1.5 even and with you is 0.75

[@galaxies_dev]

Haha just a week ago someone commented they were doubling the speed as it was boring, now you slow down.. I'm confused, but hope you still enjoyed it :)

[@sumdaresloteng9013]

Your course is amazing, I understand very well after watching your show, keep working on other tutorial videos maybe people can't pay you but God will pay you in kindness in another happy Working today

[@caginbektas]

Thanks a lot! That was a very efficient tutorial.

[@galaxies_dev]

Glad it helped!

[@wbaldisser]

great tutorial, very clear and simple. Nice job!

[@princeafrifa2787]

hi Simon nice content there... i carefully followed the process but after changing the homepage to login the login didnt show in the browser.. did i do something wrong..... and will also appreciate if you can do a tutorial on how to integrate QR Scanner in ionic 4.....Thank you

[@princeafrifa2787]

ooooops sorry i guess i still had the homepage path in my routing module...thnx anyways

[@sreevishal2223]

Brilliant tutorial..! thanks, man.

[@techxpose5853]

Thanx man, This video is very helpful for me

[@brunobaptista3988]

Brilliant as always, Simon! Thank you so much.

[@vivekr.k7950]

thanks for the lecture it's very use-full to me, if user already logged can we go to the home page without first open the login page?

[@galaxies_dev]

You could have a check in your app.component and automatically route to the homepage then.

[@sandeepjohnson6396]

Thank you working perfect... But after login page referesh member dashboard page, why first display login page before the membee dashboard.. How can i slove..

[@manishagrawal1697]

@sandeep if you get any thing related to this plz ping i am facing same problem

[@sandeepjohnson6396]

@@manishagrawal1697 sure ...

[@sandeepjohnson6396]

@@manishagrawal1697 hey use this { skipLocationChange: true }

[@axasoftware1494]

Thank you Simon , this was what I was looking for :) , keep the good job const :)

[@MegaTokusatsu]

Really awesome. Remember to leave the code lines free of your screen face. Thanks!

[@BDominikGT]

Thank you for the good explanation about ionic and the router module. I would love to here something about ionic 4 and ngrx store and router. For example when is it good practice to use the ngrx router and the store together, or when is it overkill to use the ngrx router. Because the previous 3 ways to pass data with angular router is a nice explanation what and how to use, but now I'm wondering, what is the benefits of using the ngrx router too. I already using ngrx store with ionic 3. But now I'm creating a new app in ionic 4, so I try to stick with ngrx store, just don't know should I also use the ngrx router as well. Anyways, keep up the good work, and thanks for everything.

[@Ali4276]

Hi Simon, Thanks for another great video. I have a problem when I click on register it go directly on login page but I resolve the problem simple with replace the href with routerLink, It's correct? Thanks

[@galaxies_dev]

Yes using the routerLink is always a good idea!

[@furyformer]

Solved it for me as well! Well spotted!

[@sviluppoprogettoautomazion2746]

@@galaxies_dev Hi, new question: when I open the app with a token already in the storage, it login automatically, which is good, but for a brief moment it shows the login page, how to avoid showing the login page?

[@sanjita3]

Hi Simon Grimm Thanks for tutorial ,I am getting error which was mentioned on last comment,could you please help me for error.

[@assayem4090]

Thank you Simon , this helpful video ,

[@ryanwu6889]

this help me a lot thanks!

[@sviluppoprogettoautomazion2746]

Hi Simon, just a question: are there any alternative to the storage to store the login tokens? I have to access them basically all the time and several services require then token at the same time

[@Bharatse]

Hello Simon, i followed your instructions and have implemented this in my app. But later i noticed that, the login screen flickers before redirecting to homepage, that is noticeable in your video as well. Is there a solution for that?

[@omarquazi3740]

This is because the app first loads the Login component and then redirects. I am not sure how you would do this on Ionic 4 but when I used Ionic 3 I would do the authentication state check in the app components and not redirect to the login or dashboard until the check was complete. You should be able to implement the same in Ionic 4 but I am just not sure how, yet.

[@genchiekadota9028]

You can use canLoad instead of canActivate on routing-module to fix your problem.

[@tanmayapatra6078]

Hey Simon, fist of all a big thanks for your helps through video tutorials. I just wanted a help from you. Can you please make a video for how can we do oAuth 1.0 Authentication API access by the use of Consumer Key & Consumer Secret ? Like the things used in Woo-commerce API. If you can make a video on Woo-commerce API and Ionic 4 then it will be a great help for me.

[@naseebdangi3140]

How can I add userInput to compare token and login if the token matches our default token for authemtication?

[@DoubleD884]

Hello guy , great video ...how to resolve the problem with register ? It doesn't work after login . Thanx

[@galaxies_dev]

What problem with register do you mean?

[@DoubleD884]

@@galaxies_dev Nothing , I found the solution...i used href instead of routerLink

[@kgermando]

Thank you Simon

[@marcoingo9726]

Hi Simon, great tutorial! I'm following your videos and you saved me a lot! I've a question for you: I've noticed a flashing effect when I try to open directly the /members/dashboard while I'm still logged-in. For a second I'm able to see the login page and then I'm redirecting to the "dashboard" page. Is it possilbe to avoid such effect? Thanks in advance! Marco

[@galaxies_dev]

Yes you could also use a Promise in your guard to wait until you get the result, and then there won't be a page shown before the result from storage is there. But this is a bit more complex!

[@laurafalcon5741]

@@galaxies_dev in guard service?

[@laurafalcon5741]

​@@galaxies_dev i need help, I have tried everything, but nothing works

[@laurafalcon5741]

Did you solve the error?

[@khaliqseddiqi6652]

Hey Simon, I've watched your tutorial. Actually, it's awesome. But I faced an issue that whenever the user is authenticated the app shows the login page for a second, then jump to the dashboard page. Please tell the solution, cause I'm using it in a real application and I can not show the user the login page first.

[@galaxies_dev]

You might need additional auth guard logic based on async value, because the BehaviourSubject always starts with false so the first value returned will always be that, which means the login appears. The topic becomes a bit more complicated then, but guards can also return Observables so that's the way to go then!

[@1Thor61storm8]

Great tutorial! I've been fighting with the login user flow and I reached a dead end: being in the browser, what if the user logs out, lands in the login page and then clicks on the back browser button? In my case, Guards do not trigger, authenticationState is now false (that's expected, user has logged out) but I can see the Members page. Any thoughts?

[@galaxies_dev]

But if the memberpage is protected with a guard and the user is logged out, the page shouldn't open?

[@1Thor61storm8]

@@galaxies_dev You're right. I was on a Ionic tabs template and I only injected the Guard into the tabs father component, not the children, giving me the false impression that the guard did not trigger when navigating from tab to tab. My bad, sorry

[@yiinsskibare5526]

Please, can you help us with ionic google maps native

[@MarinelCuculj]

Ionic 4 + JWT + php/mysql tutorial would be awesome :)

[@galaxies_dev]

I'm actually a PHP noob I'm not sure if anyone wants to see me fail with it :D

[@danielfasthuber5798]

Hi, Marinel did you find some tutorials on that?

[@MarinelCuculj]

@@danielfasthuber5798 Hi... I managed to do somenthing with: kzbin.info/www/bejne/nHaTapd-qpumhpI and github.com/firebase/php-jwt (I do hope I am allowed to post links in comments!)

[@MarinelCuculj]

@@galaxies_dev thaks you so much for all your videos! :) I enjoy watching them!

[@vyshnavkumar3769]

this was cool, I follow all your videos , but I have dought How to Keep Users Logged In to the App in ionic 4 ,I had done some work like storing the credentials like email and and cross-check the user in using api and the redirecting to the menu page but I am getting the login page for a few seconds and then redirecting to the menu page how to solve this, Actually its should directly open the menu page.

[@galaxies_dev]

You can use canActivate guards and then e.g. check if a user is already authenticated and route them directly to an inside page!

[@vyshnavkumar3769]

@@galaxies_dev tq Will try this

[@KochharAmandeep]

Thanks a lot was waiting for this!!

[@1998goodboy]

is this something that would work or would be recommended to use with Firebase authentication?

[@galaxies_dev]

This is a more general video, but should work with Firebase as well!

[@CarlosSK]

You know, How to create a login page before dashboard with tabs in ionic 4?

[@Technbuzz1]

Where is the Angular Guard kicks, where the guards helps? I think every time all the job is done by initalizeApp() in app.component.ts

[@galaxies_dev]

The guards are applied to the routes which use it with canActivate

[@rachnasingh8976]

Local storage value is not reflect on the page. But when i refresh the page value is reflected. Please reply

[@RaveKev]

haha, watched that video to get the information, how to type in "/register" directly in the URL without geting thrown to login. Unfortunately, you had the same problem 24:04 . How would you fix it?

[@galaxies_dev]

It's all about setting up the routing correctly - make sure you that no other route matches or strikes before you reach the entry for the register path - that's really the general idea behind it!

[@sameerahmed7333]

i am creating all pages in src/app and i want to navigate to tabs page in which have child page in app-routing.module.ts then how i implements this, can u explain plsss???

[@yudinoviyandi2145]

Login Flow with Angular Router for Ionic 6

[@galaxies_dev]

You might like this: kzbin.info/www/bejne/iKbYgJecr55-rsU

[@yudinoviyandi2145]

Oke thanks 👍

[@kell7491]

why input component moves when on focus?

[@saket-chaitanya]

It would have been better if you would have explained the syntaxes which you typed rather than just speak what you are typing. We have to read everything what is written there to understand what these syntaxes are.

[@kaushiklad6551]

In ionic 4 latest ...i m able to make my demo app wich work fine on browser ..but in real device it has cors issue..i try so much but not able to solve it ...can u help me....i try ur login tutorial nice content ty

[@galaxies_dev]

CORS happens because your Javascript is making HTTP calls to an API on a different domain. Either implement CORS on the server or use a proxy or use the Ionic Native package for native HTTP calls!

[@codeaxen]

Simon Grimm Great Tutorials.....

[@kagwad_in]

Love you brother... brother please teach us food cart or shopping cart app

[@rachnasingh8976]

Hello sir, I am trying to make login using local storage. My side menu open in appcomponent.html file. i open my app then click on the login menu and enter the value and click pn the submit button then i storeted the value in storage but these value is not reflected in appcomponent.ts file. But when i refresh the page value is reflected. How can i solve this problem. Please reply

[@Kinr.-.]

where the ng is used to generate that change is now used ionic

[@surajitdas6555]

Auth guard need to declare in app.module that was the reason it was not working

[@nizalshaonline]

Hi simmon, I'm getting this authenticationSate does not exist on type AuthenticationService

[@renatoniola1187]

"Sate" ??

[@lastpoint9488]

how to add input field dynamic in ionic3

[@sarbudeenmca]

Hi, in 15:55 how did you solved (this.authService.login is not a function) error please give link for solution.

[@galaxies_dev]

Then either the service was not injected or the function not yet created inside the service!

[@poimsm]

How to add firebase facebook login? My implementation is not working.. problems in the facebook native plugin..

[@devendragaud831]

When we directly go to the registration page, for a moment the login screen appears 24:30. I don't want that to happen. Is there a way to do that?

[@galaxies_dev]

I'm working on a more complex example that prevents this behaviour using Observables in the canActivate guard :)

[@gurnaibsingh7106]

Hello sr some problem in ios build

[@shafi2344]

Thank u.

[@ayne99]

How to change after login into tabs? i already watch ur video about How to Add A Tab Bar to Your Ionic 4 App and i have tried combine both of them, and when i click login button it's nothing happen. but when i go to localhost:8100/tabs its works without login

[@poojamishra1505]

i just want to know Login Flow with Angular Router in angular 7 with ionic 4 please help

[@galaxies_dev]

Yes that's exactly what this video is about :)

[@avijitguria8705]

NullInjectorError: No provider for Storage! how to solve it?

[@hagarmohamad9634]

same here

[@LuckystrikeGFXer]

I changed the import in app.module.ts from '@ionic/storage' to '@ionic/Storage' and imported "import { Storage } from '@ionic/Storage' " in authentication.service.ts and I dont get the error message anymore.

[@LuckystrikeGFXer]

@@hagarmohamad9634 Look at my answer to the guy you commented on. Maybe it helps.

[@brunobaptista3988]

hello friend. i was facing the same error here. in the app.module.ts you have to import IonicStorageModule instead of Storage, then import IonicStorageModule.forRoot() same like here: ionicframework.com/docs/building/storage

[@galaxies_dev]

Yes you need to add it to your app module!

[@profapps]

thank you Simon Grimm it's very helpful to me pleas give ass github.com project

[@FangMarshalinRider]

the register button just refreshes the login page, i am not so sure what i did wrong here, i read over every bit.

[@galaxies_dev]

Hmm did you mix up some routing information maybe?

[@GazohYEH]

The only annoying thing is that whenever the guard is true that it first goes to the login page and than springs to the home page in my cenario. Like in the video 24:28 - 24:32

[@galaxies_dev]

I see. You might be able to directly use Ionic Storage from the Guard and return a Promise instead. By doing this, it won't initially return false but really wait until we got the value from the storage!

[@imanmanz]

hi, why i cannot put 'ng' command?

[@imanmanz]

3:53

[@galaxies_dev]

You might have to install the Angular CLI!

[@MahmudulHasan-fi6xr]

when I add this code in app.component.ts this.authService.authenticationState.subscribe(state => { // console.log('auth changed: ',state) if(state){ this.router.navigate(['members','dashboard']) } else { this.router.navigate(['login']); } }); all url under the access privilege. I can not access page, it redirect the login page

[@surajkushwah4570]

ERROR in Could not resolve module ./members/member-routing.module relative to app\app-routing.module.ts This is a error I am solving since 2 days

[@galaxies_dev]

This means your path to the file is wrong!

[@gurnaibsingh7106]

api is not work in iphone

[@jhonstivenguevaravelasco8482]

ng generate module members/member-routing --flat As a forewarning, we are moving the CLI npm package to "@angular/cli" with the next release, which will only support Node 6.9 and greater. This package will be officially deprecated shortly after. To disable this warning use "ng set --global warnings.packageDeprecation=false". The option '--flat' is not registered with the generate command. Run `ng generate --help` for a list of supported options. You have to be inside an angular-cli project in order to use the generate command.

[@jhonstivenguevaravelasco8482]

ionic g module members/member-routing --flat

[@hansschenker]

Most valuable content - but not carefully presented! To my taste the errors could be corrected before publishing, they are irritating and annoying! But anyways thank's for making this content public :-)

[@galaxies_dev]

Hey Hans, yes you are right. I can do more copy/paste to prevent them but with livecoding it can happen. But I'll definitely cut out most of the error searching in all future videos!

[@tanmayapatra6078]

@@galaxies_dev You should show how you are solving the errors, from this most of the developers will get the idea to solving the errors.

[@Venkatyful]

Sir please teach slowly as i am not so comfortable with authentication and all that

[@galaxies_dev]

Sorry, will try to do hard things a bit more slowly next time!

[@k3logics925]

Simmon, why your video code and documented code available at devdactic.com/ionic-4-login-angular/ are different. That would be very helpful for all the viewer and users, if you could provide tutorial code on github. Thanks a lot.

[@galaxies_dev]

Normally the code is 99% the same, maybe I only changed a few things due to a different Ionic version!

[@jdotsystem]

Nonsense, you should learn server structure for the client application If I was you, I created the login check screen between the login screen and main screen Do you know this meaning?

[@galaxies_dev]

I don't understand your rude tone in here? This is a simple example without a backend.

[@rajathedav1258]

please reply for it

[@rajathedav1258]

you are doing so fast beginner can't understand it properly.Make it little slow for us.

[@galaxies_dev]

Sorry, will try so next time!

[@renatoniola1187]

you can slow down in youtube

[@الحمدلله-ط8ز1ذ]

Thank you ..

[@islamabdugafarov3308]

NullInjectorError: No provider for Storage! , How connect login with tabs?

[@galaxies_dev]

You need to add IonicStorageModule to your app.module! And you can simply have a login page before navigating to the tabs routing file of your app!

[@islamabdugafarov3308]

@@galaxies_dev thanks i have use firebase after