63 comments on “Login Screen and Authentication with Angular2

  1. Lena

    That’s awesome! Don’t you have a github to upload it or somewhere that i can get full source? Thanks for that!

      1. ishu mishra

        Hello sir as i couldnt compile it some probs are there when i trying to run my server part then i am getting this error even i have changed my port
        Error: listen EADDRINUSE :::3004

  2. Lena

    Hi Leonardo Jines,
    Could you help me take a look the error below?

    Argument of type ‘User’ is not assignable to parameter of type ‘string’.
    at angular2_login\app\authentication.service.ts
    at line localStorage.setItem(“user”, authenticatedUser);

    Thank you so much!

          1. Abhinav

            I think since AuthenticatedUser is an object, you can’t directly assign it to a string. Hence you can prolly assign authenticatedUser.email to the user variable. This should solve the issue. It’s just up to you how and what you wanna assign to the user. Just make sure it’s a string.

          1. Tom

            Id assume so Patrick. Probably using

            localStorage.setItem("user",JSON.stringify(authenticatedUser));

            However for some reason I am not able to import LoginComponenet and RouteConfig. Anyone else have this error?

    1. Sai

      Hey Leo, thanks for sharing this, but i guess I am having similar issues like Lena.. for authenticatedUser. Argument of type ‘User’ is not assignable to parameter of type ‘string ‘. Any suggestions ?!

  3. ayost

    This works like a charm and avoid the trick I’ve been seeing of overriding router-outlet. However, I am concerned about the timing of the OnInit hook. Is this method really secure, or could a crafty user stop execution before the OnInit hook and be able to view the page?

    1. Leonardo Jines

      He would probably be able to view the page, but in a real case scenario I recommend you to validate the user on the back-end before returning any significant data or performing an important task.

  4. CCPony

    Hello. Your comment, “Although I’ve put these rules on an Angular2 service, I strongly recommend you to let the server control everything regarding user authentication” is interesting. Obviously, I’m interested in your tutorial so that I can learn how to properly use authentication with Angular2. Why would you write a tutorial that is inherently insecure?

  5. Swetha

    Good article. Thanks for posting it.

    I have a compilation err on authentication.service.ts – [ts] Property ‘find’ does not exist on type ‘User[]’.
    any. I see that i dont have the folder structure – browser/ambient/es6-shim/es6-shim.d.ts, main/ambient/es6-shim/es6-shim.d.ts. How do i generate those files inside typings folder?

    1. the digitalmouse

      Swetha, did you do ‘npm install’ in the root folder of the project before running the app?

      1. Kasim

        Hi i got the same error like ‘Property ‘find’ does not exist on type ‘User[]’.’ i installed ‘npm install’ in root folder. so that i got the folder ‘node-modules’. how to fix that issue?

  6. kumar

    Hi ,

    I want to know how to validate the login form using php webservice . Also i need to know how to pass the Username and password to webservice to validate the credentials.

    1. Kasim

      Hi i got the same error like ‘Property ‘find’ does not exist on type ‘User[]’.’ i installed ‘npm install’ in root folder. so that i got the folder ‘node-modules’. how to fix that issue?

  7. sagar

    Hi Leonardo,
    Very good article , May i know how to take the email and password dynamically from ui and storing in database

  8. Vishnu

    Hi Leonardo

    Very good article.
    Can you also please explain, how can we show logged in user details in app.component.ts.

  9. kramer

    it only checks the username, so it logs you in even without entering the password. How can I check the password as well?

    1. kramer

      Edit: I think its something like this but please correct me if I’m wrong

      var authenticatedUser = users.find(u => u.username === user.username && user.password);
  10. vinothnair

    Thanks for the awesome article. I understand your point on the server side validation of user which make sense but In this article the authenticated user is stored on the local storage with the password. I think the password should be removed before storing it to the local storage. Please clarify.

  11. Mike

    Great tutorial, thanks! What if i am developing an app for a big corp and the logged in area is only intended for employees. They have a button that is that is called blacklistClient and there is no way they want somebody to be reading the source code with chrome dev tools. Like in your example i am able to see private.component.ts and all its content without being logged in. Yes in real world i could not able to pull data from the API, but there must be cases where the html code should be hidden to non logged in users too. How can i achieve this?

  12. Nedu

    Thanks Leonardo. Very helpful. I would like to get the username and password from a DB and will like to use PHP as the server side language, using angular2 (typescript), please what is the best way to achieve this. Thanks

  13. rohit

    Hi Leonardo ,

    When I trying to run the app I got an error .
    Can not find ‘RouteConfig’ * \index has no exported member “Router provider”

  14. Shawn

    Hi,
    I tried just installing the angular 2 framework and running it. But it i run it in the new RC6 it doesnt work. Can you look at it.

    Shawn

  15. prachi

    very helpful article. i want to use sails.js in back end and integrate angular2 with sails.js ..please tell me the way how can i achieve this?

  16. John

    Thanks for this article. In localhost the app is working fine, when I upload all stuff into my website it gives only a ‘Loading…’ message. How can I fix this issue? Thanks in advance!

      1. John

        Hi Leonardo,

        There is a npm-debug log, that’s all I found.

        0 info it worked if it ends with ok
        1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
        1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
        1 verbose cli   'run',
        1 verbose cli   'lite' ]
        2 info using npm@3.10.3
        3 info using node@v6.5.0
        4 verbose run-script [ 'prelite', 'lite', 'postlite' ]
        5 info lifecycle angular2-quickstart@1.0.0~prelite: angular2-quickstart@1.0.0
        6 silly lifecycle angular2-quickstart@1.0.0~prelite: no script for prelite, continuing
        7 info lifecycle angular2-quickstart@1.0.0~lite: angular2-quickstart@1.0.0
        8 verbose lifecycle angular2-quickstart@1.0.0~lite: unsafe-perm in lifecycle true
        9 verbose lifecycle angular2-quickstart@1.0.0~lite: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\Users\user\Desktop\Angular2\angular2-login\node_modules\.bin;C:\Program Files\nodejs;C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\Users\user\Desktop\Angular2\angular2-login\node_modules\.bin;C:\Program Files\nodejs;C:\Program Files\Common Files\Microsoft Shared\Windows Live;C:\Program Files (x86)\Common Files\Microsoft Shared\Windows Live;PATH=C:\Program Files\Java\jdk1.8.0_66\bin;C:\Users\user\Downloads\apache-maven-3.3.9-bin\apache-maven-3.3.9\bin;C:\Program Files\apache-tomcat-8.0.28\bin;C:\Program Files\Java\jdk1.8.0_66\bin;C:\Users\user\Downloads\apache-maven-3.3.9-bin\apache-maven-3.3.9\bin;C:\Program Files\MySQL\MySQL Server 5.7\bin;C:\ProgramData\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\WIDCOMM\Bluetooth Software\;C:\Program Files\WIDCOMM\Bluetooth Software\syswow64;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon;C:\Program Files\cURL\bin;C:\Program Files (x86)\Windows Live\Shared;C:\Users\user\Documents\ant\apache-ant-1.9.6\bin;C:\Program Files\CloudFoundry;C:\Program Files\nodejs\;C:\Program Files\Intel\WiFi\bin\;C:\Program Files\Common Files\Intel\WirelessCommon\;C:\Users\user\AppData\Local\.meteor\;C:\Program Files (x86)\Nmap;C:\Users\user\AppData\Roaming\npm
        10 verbose lifecycle angular2-quickstart@1.0.0~lite: CWD: C:\Users\user\Desktop\Angular2\angular2-login
        11 silly lifecycle angular2-quickstart@1.0.0~lite: Args: [ '/d /s /c', 'lite-server' ]
        12 silly lifecycle angular2-quickstart@1.0.0~lite: Returned: code: 3221225786  signal: null
        13 info lifecycle angular2-quickstart@1.0.0~lite: Failed to exec lite script
        14 verbose stack Error: angular2-quickstart@1.0.0 lite: `lite-server`
        14 verbose stack Exit status 3221225786
        14 verbose stack     at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:242:16)
        14 verbose stack     at emitTwo (events.js:106:13)
        14 verbose stack     at EventEmitter.emit (events.js:191:7)
        14 verbose stack     at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
        14 verbose stack     at emitTwo (events.js:106:13)
        14 verbose stack     at ChildProcess.emit (events.js:191:7)
        14 verbose stack     at maybeClose (internal/child_process.js:877:16)
        14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
        15 verbose pkgid angular2-quickstart@1.0.0
        16 verbose cwd C:\Users\user\Desktop\Angular2\angular2-login
        17 error Windows_NT 6.1.7601
        18 error argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "lite"
        19 error node v6.5.0
        20 error npm  v3.10.3
        21 error code ELIFECYCLE
        22 error angular2-quickstart@1.0.0 lite: `lite-server`
        22 error Exit status 3221225786
        23 error Failed at the angular2-quickstart@1.0.0 lite script 'lite-server'.
        23 error Make sure you have the latest version of node.js and npm installed.
        23 error If you do, this is most likely a problem with the angular2-quickstart package,
        23 error not with npm itself.
        23 error Tell the author that this fails on your system:
        23 error     lite-server
        23 error You can get information on how to open an issue for this project with:
        23 error     npm bugs angular2-quickstart
        23 error Or if that isn't available, you can get their info via:
        23 error     npm owner ls angular2-quickstart
        23 error There is likely additional logging output above.
        24 verbose exit [ 1, true ]
        1. John

          hi,
          In the logging, the lite server location is still on a C:\Program Files path, which is unreachable from the hostingserver. The version of node.js is 6.5.0 and the version of npm is 3.10.3 which is compatible. Do I have to deploy a lite server on my hosting server?

  17. John

    ok, I download the zip file and after extracting the file, I open the cmd in that directory; npm install, npm start, everything works fine, in localhost the tool is working. When I upload the files after this in the webhosting there is only a ‘Loading…’ message and it is not working at all. What is going wrong?

  18. Lord_Pinhead

    Hi,

    thanks for the head start. But, if you need Roles for the UI, i.e. hiding not accessable parts of the site, you have to add more informationen.
    In my Java or .Net Backend, the Userinformation is complete, so the User Object will be extended with an Collection of Roles. If you want, i could send you my source.

  19. Abhinav

    Great tutorial! Would it be possible for you to modify the code according to the new stable release. I am getting errors for some of your code and it would be good if I align the code according to the new changes.

    Cheers,
    Abhinav

  20. Sudheer Pal

    Hi

    This seems to an older version of Angular 2.

    Is code for later version is available on Github?

    Also do you have code where we can use Rest API to get the Loginof users.

  21. Neha

    Hello,
    Good tutorial.
    Could you please send the folder structure?
    I guess somewhere is going wrong in my app.
    Is it ok if we use angular/core instead of @angular/core? Because its throwing error that ‘cannot find module’ since I had installed npm modules.

  22. aravind

    hey bro like this tutorial ,but i want after login user in the login page it is redirect to the some page (example like user dash board)then i need sign up page creation code and both pages how to add with the backend java code .

    1. Pradeep

      Hi Sri,
      If you just get ‘Loading….’, it means you are able to access the Server and Angular 2 installation is fine.
      Since this has Single Page Application architecture, /src/index.html file is the only file accessed and it echoes “Loading…” in “app-root” section.

  23. snehasish

    var authenticatedUser = users.find(u => u.email === user.email);
    in this line the .find function is not working for my code i have checked it couple of times and its showing me an error like
    [ts] Property ‘find’ does not exist on type ‘User[]’

    So, What to do anyone help.

  24. Rohit Luthra

    I have developed Rest Service for my android app using express.js, mongodb, mongoose it is running and hosted somewhere and my app is able to use it. Now we found a requirement of web admin for the same service and I want to create that web admin in Angular2 with material design 2. So can you please provide us tutorial of Angular2 with material design which should also use any running rest service(web service).

  25. chirag

    Hey, I am facing error has no exported member ‘ROUTER_PROVIDER’ and router import error. how can i solve it? Thanks in advance.

Leave a Reply to Julia Cancel reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>