Signup for the Ionic Newsletter to get the latest news and updates!

  • Sam Bryfczynski

    So a general question. I always read that storing JWT in localstorage is a bad idea since XSS attacks could get access to your localstorage. Is this not a concern in Ionic? Or are people doing something else to protect against that? Most of the examples of Ionic use localstorage so I was hoping someone could explain why that is safe as opposed to standard web apps.

    • Luke

      I use sqlite because iOS occasionally clears local storage whenever a user’s phone is low on memory, effectively logging the user out. For devices, sqlite is the best option IMO.

    • Chanoch

      If you want to use Lock then you will need to store using either LocalStorage or sqlite – both are vulnerable to XSS. Whether this is an issue for you depends on a risk assessment of whether you are loading scripts from CDNs (and their vulnerability level) and the likelihood of js injection via user input.

      The alternative would be to implement your own server side authentication – getting the ionic application to submit the login and registration requests to a backend server and have that authenticate with auth0 and then issue a web only cookie. You would need to ensure the security of the transport, protect against CSRF and obviously to implement the relevant api.

      So, I think the local storage model is a convenience one. It is arguably less secure than server side authentication with HTTP only cookies. I would say though there’s a lot more for you to do, so you would need to do everything right or risk a less secure implementation.

  • fabio balsamo

    Hi mr Ryan, excuse me for this message, but i need the help of a senior developer. I’m a rookie in ionic and i need to create an app that implement the device file system and google drive(and all the function of view the file list, download, upload …) but i’m not enough skilled to do something like that. I tryed many times but nothing. My only hope is the help of a skilled developers like you…
    Please if you can help me with a tiny code to do that, with just a little bit of explanation or a tutorial. Thanks in advance and sorry for annoyng you.
    Have a nice day.

  • Mehmet Ali Izci

    Hi Ryan ! I really liked the doc that you prepared. Thank you so much. I have one question though:

    I know Auth0 has advantages but my main purpose is: Pass token from Google Sign in to my back-end server. So I don’t need an Auth0 service to handle my things. Is there any chance to use your example and not use any Auth0 related stuff ?

    Thank you !

    • ryanchenkie

      Hey Mehmet! Is it a JWT that you are passing to your backend? If so, you can just replace the secret key that is used in the backend in this example with whatever secret key is applicable to your situation.

  • Mateus Machado Luna

    Hello Ryan!

    I’m having some issue here… Inside my auth.ts, it “Cannot find name ‘Auth0Lock’. I have my “declare var Auth0Lock: any” right there too, but it still complains about it. If I remove this one I got two errors, the new on being about the constructor. Any ideas on how to solve that?

    Thank you a lot for the detailed tutorial.

    • 7200rpm

      I am having the same problem…posted on forum: https://forum.ionicframework.com/t/cannot-find-name-auth0lock/47414/2

      Doesn’t look like there is a fix yet

      • Chanoch

        I’m pretty sure that the Auth0Lock object is a global that is created by adding the Lock script to your www/index.html file

        Did you do that? This code works fine for me (but I did convert it to ES6)

        • 7200rpm

          Yes, I did. There were some issues with the lock script that were incompatible with the latest beta of Ionic 2. I contacted Auth0 support and as of a few days ago have updated the lock script and I can confirm that it now works correctly.

  • Nuno Arruda

    Heads up: Ionic’s index.html already has the viewport meta tag, no need to add it again.

    • ryanchenkie

      Thanks!

  • M. Ali Setia Pratama

    Hello Ryan! I read your tutorial https://auth0.com/blog/2016/02/18/ionic-2-authentication-how-to-secure-your-mobile-app-with-jwt/

    I want to know how do I navigate to a specific page after I successfully login ?
    Not using click event or configuration in .html file, but redirect to a page after i log in.

    Thanks for the great tutorial btw.

    • Chanoch

      Hi, this is an ionic question rather than an auth0 question but basically:

      If you want to navigate to another page following login, then you need to redefine the login event as follows. In the profile.html file, instead of calling auth.login(), call login() as follows:


      Login

      Then in profile.ts, you would need to define a method that would do the navigation following the login.

      public login() {
      this.auth.login();
      this.nav.push(PingPage);

      }

      • M. Ali Setia Pratama

        Thanks for answering my question.

        Have your read the tutorial ? in the profile.html, Ryan use to define whether the user is log in or not.

        My question is, how can i navigate into another page immediately after success log in using authenticated method as a parameter, but without using event such as click ?

        Is there a syntax (in html file) to navigate to other page after i pass the parameter ? What i’m saying is like:

        NAVIGATE to Other Page //but how do i write this in real syntax ?

        If i do your advice to use login button as a click event to navigate to other page, then i miss authenticated method as a condition wheter i have log in or haven’t.

        Hope you understand my question, i’m sorry if you have to read the tutorial as well to answer this question.

        • Chanoch

          Hi,

          Can you explain the scenario further? Why would you want to redirect the user from the Profile page if that’s what they have requested?

          The scenario describe here is as follows:

          User requests Profile Page (user logged in)
          User is shown Profile Page

          User requests Profile Page (user not logged in)
          User is shown Login (User logs in)
          User is shown Profile Page

          Why would you want to redirect the user in either of these to a different page?

          • M. Ali Setia Pratama

            I’m sorry, but have you read the tutorial ? Just read it please if you don’t understand what i’m saying..

            Class ProfilePage in that tutorial is what we know as Login Page. It’s the first page showed by the app. Then after we log in, in Profile.html, Ryan just wrote some html code to show something like welcome message text and a button for logout which is not specifically a page.

            You got it ?

            What if i don’t want to show that html message, but instead, i want to immediately redirect user into a page that i have design for home page.

            Left image is what ProfilePage do, and after we log in, Profile.html execute some html code to show something like in the right image.

          • John

            Hi,
            did solve how redirect to other page ofter successful login?
            Thanks

          • M. Ali Setia Pratama

            Hi, thanks for replying!
            I redirect it in the end by adding this line in function authSuccess(token)

            this.nav.push(AnotherPage);

            But, there’s something that i still want to fix. In the process when i successfully login and before the app redirect it into another page, I still see the login version of ProfilePage. In the tutorial it would be a page saying “Welcome, Ryan” and a log out button. It was kind of fast, but what if I don’t want to see it at all until I choose to access it in a different way ?

            How do I fix that ? Thanks

  • Chanoch

    I converted it to ES6 quite easily and it works well.

    The question: when testing in a browser, the log out isn’t very successful… If I try to login then it automatically rejoins me in without requesting a password as long as I indicate the previous user. Am I missing something in the implementation? Should there be a server-side invalidation of the session in the auth0 service? Can Lock be called to do that?

    • Matt

      It should log on for as long as the JWT (the token) is valid. By default I think this is set at 10 hours in the Auth0 Application settings (log into the dashboard if you want to change it).

  • Jb

    I’m trying to follow the tutorial. when does the tabs page is created? you didnt mention it, did I miss somthing?

  • Jb

    I don’t know why, but the authenticated() method not working for me. I couldn’t even see the pages until I removed it and it’s call’s from the buttons. anyone have this issue?

  • Jb

    Hi Ryan,
    I have tried your repo, and also tried to create a new app. The project works only in the browser. anything else I see blank screen (ionic view, device, emulator).
    How to solve this?

  • Luke Lee

    Hi Ryan:
    Thank you for this post. Yours is the only one post with session management on the ionic 2 on the web. I am very grateful.

    Please help me with this problem..I have read over your post and the https://manage.auth0.com/#/applications/–my key—/quickstart for about 2 days and tried many things..I am stuck on the

    “Cannot resolve all parameters for ‘AuthService'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that ‘AuthService’ is decorated with Injectable.” problem..

    [I have tried constructors:

    constructor(private authHttp: AuthHttp) {
    and
    constructor(private authHttp: AuthHttp, zone: NgZone) {
    ] in the auth.ts file and the 1st one gave me “Cannot resolve all parameters for ‘AuthService'(?)…” and the 2nd one gave me “Cannot resolve all parameters for ‘AuthService'(?, ?)…”

    I think I am missing some steps or some files off your blog. Would you please shed more light on this.

    Thank you.

  • Roydell Clarke

    this does not work! Cant install sudo npm install angular2-jwt.

  • Roydell Clarke

    Getting white screen of death we tried to open your file. All four of are getting similiar errors

  • http://www.dirkbertels.net Dirk Bertels

    Just a little comment regarding the angular2-jwt library. The latest version doesn’t have the correct dependencies for the current Ionic platform (as of July 2016). That can be fixed by installing an earlier version such as [email protected].

  • Wei

    I follow this demo, but anyone know if we using the signup tab. once we install in the really device, and using the signup tab, click the signup then the app will crash. any idea?

  • udeshika perera

    Hello,
    Could not run the “npm install angular2-jwt”, I’m getting
    β”œβ”€β”€ UNMET PEER DEPENDENCY @angular/[email protected]
    β”œβ”€β”€ UNMET PEER DEPENDENCY @angular/[email protected]
    β”œβ”€β”€ [email protected] extraneous
    └── UNMET PEER DEPENDENCY [email protected]

    • Meet your maker

      You need to run this command inside your project’s folder.

  • Cinilak

    Is this tutorial out of date? Thanks.

  • NuΓ±ito de la Calzada

    in auth0 the user is active only if has authenticated in the last 30 days.
    Is there a way to modify this value from 30 to 360 ?

  • a n onymous

    What about web sockets, for instance, using a library like socket.io?

  • jeremy lamboley

    Hello,

    Thank you for this very useful tutorial. I have the same problem as many others: it is working well in a browser (ionic serve) but doesn’t work on real device (ionic view). Any idea ?

  • Martin Γ…hlin

    For a complete example and instructions on auth0-settings, see https://auth0.com/docs/quickstart/native/ionic2

  • Flavio Passa

    Is this sample code still working/functional? What about Auth0 version 10 working with Ionic 3, any sample?

    • Jean-Pierre Damstra

      I second this request. An updated tutorial would be amazing at this point.