Is there no existing package to do basic JWT Auth?

It seems weird to have to build one from scratch. I have my web app on Vue.js and I used a nice package but for a community as vast as RN, I don’t see a basic Auth system with a login screen that interacts with my REST API , refreshes tokens, sends tokens on every authenticated request. Any ideas?

Hey @aligajani!

I suggest checking out https://docs.expo.io/versions/latest/sdk/auth-session/, this is the API Expo provides for adding browser-based authentication to your app.

Charlie, I’m looking for JWT based Auth. This one doesn’t help much as I looked at it before.

@aligajani, Oauth is just a framework, and JWT is a type of token. So you can use OAuth with JWT tokens

I don’t see much guidance on the page regarding JWT as I’m completely new to Expo and RN community

Have you tried https://www.npmjs.com/package/expo-jwt, which I came across via a web search? I haven’t used it, am about to try it for my application. It seems that JWT is a standard, and I’m sure most Expo apps must consume an API, and authentication must surely be via JWT. (Perhaps I’m wrong?!?!)

I did check. This is for decoding and encoding tokens. Not for my use.

What library do you use in Vue? Kind of curious how much of this could be packaged in a library on the RN side. Heck, maybe you could build it! :slight_smile: (or me, I could use something like this at some point).

There are some things you can do to automate sending tokens each time and ensuring that they’re refreshed appropriately. React Native is compatible with Axios (https://github.com/axios/axios). I definitely recommend Axios over fetch for any non-trivial app. You can set your JWT as a default header to be passed with each request, for instance, by setting it on axios.defaults.headers.common. You could do token refresh manually with Axios interceptors, or find a package like https://www.npmjs.com/package/axios-auth-refresh to handle that. I think you’ll find it shouldn’t be too much trouble to get JWT auth going with a combination of a) SecureStore for persisting the token, b) Axios interceptors/ plugins for managing all the token stuff going on with requests, and c) AuthSession/ WebBrowser if your auth workflow starts with the user going to a website external to your app. If c) doesn’t apply to you, building a login screen directly in RN is pretty straightforward, and it something philosophically a lot of us on involved with RN would probably prefer to leave outside of a library due to differences between navigation stacks and use of different data stores (redux, mobx, etc.).

Excellent answer. You got what I want. The library I use on my Vue web app is @websanova/Auth” which does exactly what I want without any state library. I just wonder why there wouldn’t be such a basic package to help with RN.

Sure there are tons of tutorials but I am a noob in RN wanting to get things up and running quickly and use something battle tested by the community versus building my own. If I am pushed to build my own (probably with MobX or void of it) I will open source it but meanwhile I really need something to get going.

What I am looking for is something that is of the same class as the Vue package I stated. It works super well for me on my web app. In theory I know how to build JWT client solution except I have the paucity of time to do so.

Regarding login screens, that I can figure out myself. Shouldn’t be too hard with React Native Navigation by Wix to setup I imagine. Also I heard AsyncStorage is the way to go for storing tokens?

Thanks for sharing- cool library. It’d definitely be nice to have the token refresh logic, user profile refresh, querying of permissions, etc in a consolidated package (preferably as some kind of Axios integration). Some of the features don’t have a clear analogue in mobile (e.g., how to “redirect on 404” or block access to a URL when the user is unauthorized - like, we have to handle 404’s but it really varies by app, and routes are a totally different animal), which I think is part of the reason why something so all-inclusive doesn’t exist in RN. Tight integration between the base library, routers, stores, etc. seems to be a distinctive feature of Vue that also probably helps make a strongly-opinionated library like this practical.

Worth noting that the token stuff doesn’t have to be an RN-specific library. If there’s a library typically used for web/ React.js, as long as it’s implementing the network requests using fetch or XmlHttpRequest, then it should work in RN. Generally, most web JS libraries work in RN- as long as they don’t depend on an HTML DOM, it should be OK.

Anyway, I’d continue looking at either the Axios route or for another web library for the token refresh bits. AsyncStorage would be fine for storing tokens. SecureStore offers a little more security, but both are sandboxed and no less secure than HTTP local storage. If you’re new to RN, you might find React Native Navigation a bit of a jump, since it requires native linking. React Navigation works in standard Expo without modifying Xcode/ Android Studio projects, and building your PoC in React Navigation now wouldn’t preclude you from moving to RNN later if you’d like. Would generally recommend against using a central store like MobX until you need it (though I strongly recommend MobX once you do), and you shouldn’t need it simply for getting JWT auth up-and-running.

Dear Keith, many thanks for your detailed reply.

  1. User profile refresh, token refresh logic, login and logout is the basic requirement. User permissions we can do without at this stage as the only user is member.

  2. Regarding 404s, I don’t worry about that because we can simply take them to index page or in case of auth expiry, logout. This is how I handle it on my Vue web app.

  3. I think that using React Navigation and Axios should be suffice for this setup entirely, as decoding and encoding tokens is done on my backend.

  4. I understand I can’t use React Native Navigation because it will require me to eject and doesn’t offer any massive advantages for my startup which is a basic Health/Fitness app with Vimeo videos.

  5. Okay Mobx might not be needed because I didn’t use any store on my web app for Auth bits either. I understand that I am not trying to replicate everything from web app. Mobile app is just for existing users to login.

  6. I always like some mentor when I learn something new and I feel your response here has been detailed enough. Will you mind if I add you over on Facebook/Discord/any other service…

  7. Maybe what I can build for my mobile app’s JWT solution can later be open sourced for the community. I am looking to start off with React Navigation, AsyncStorage, Axios.

  8. Did you look over this library? It has a large code base for a lot of features that we don’t need so the codebase should be very simple.

  9. I am looking for the following as a bare minimum:

  • Ready
  • User
  • Redirect
  • Check
  • Fetch
  • Login
  • Logout

Also I am not sure whether to implement route auth filters or as such as because people on mobile apps can’t really visit URLs manually so doesn’t need protection in that regard.

RE 6: Sure thing, best place to find me is the Expo Slack (@keith)

1 Like

Just wondering if there are any updates on this? I’m using Laravel Spark which uses Vue and axios to generate/refresh tokens using JWT.

I’m in a similar place to you, where I just need to let the user login and then start consuming the API to show things in the Expo app and allow general CRUD actions.

Any tips/insights would be hugely appreciated.

1 Like

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.