Using sessions with react native

[MontoyaAndres]

Hello,

This project looks pretty great! Thank you for sharing it! My question is, how can I use the API made with a react native app? Knowing that this one uses sessions as a authentication method. I mean, when the API creates the cookie, react native where will save it? Do you know any solution for this?

[hoangvvo]

I do not have much knowledge on React Native, but a quick search on Google landed me on this. It seemed that cookie support was not really good on React native, and this web app's session works based on Cookie.

Can you elaborate your use case? A possible solution might need to involve things like SAML or OAuth.

[MontoyaAndres]

That's sad, in the case of auth with react.js for web and react native, it's common to see that the backend sends a token and the front end save it.

For example, if a server sends a token to my web, I save it on localstorage, or if I use Next.js, in that case is with "next-cookie"

In the case of react native, I just save it in "SecureStore" (with expo)

What about if you make another repo about this? Maybe this video could help:

https://youtu.be/25GS0MLT8JU

[hoangvvo]

@MontoyaAndres How would you approach the authentication? Do you want the user to enter the username and password inside your react native app? Or do you want to user to be redirected to the web app (Next.js) where the user enters the credential, and get redirected back to the react native app?

[hoangvvo]

We can send back a session Id or auth token instead of cookie on the web. Like you said, we then store it in SecureStore. Every time we make an API Request to the web app, we can send the token along in Header.

The way next-session works is that it reads the token from cookie, but we can totally make it to read from a header.

Tell me what you think!

[MontoyaAndres]

@MontoyaAndres How would you approach the authentication? Do you want the user to enter the username and password inside your react native app? Or do you want to user to be redirected to the web app (Next.js) where the user enters the credential, and get redirected back to the react native app?

The user enters the username and password inside the react native app, or the web, it does not matter because when you do the POST petition to the api, for example /signup, it just takes the values and sends a token back.

In the case to validate a route, you just take the token saved on localstorage or SecureStore and pass it to the api, meaning that the app is stateless and more secure also.

axios.post(
    'https://mywebsite.com/superSecret',
    {headers: {
        "token" : "awesomeTokenHere"
      }
    }
  )

The api takes this token and validates it!

For example, an awesome post I read, https://blog.hasura.io/best-practices-of-using-jwt-with-graphql/ explains that is better to save the token on memory and check every time if the token has expired and regenerated every 15 seconds for example. The video I sent you is inspired by this, because the apis were made to be stateless and using sessions it's not a good practice.

[MontoyaAndres]

Also, what I wrote, it's completely manual, I mean, you need to write everything from scratch, what I do not know is if this functionality exists in Passport.js, because I've used it with sessions, but what about using passport-jwt that is completely stateless? I project made with it would be interesting.

[hoangvvo]

@MontoyaAndres JWT as session is not my best likings. One thing about JWT I do not like is that it is irrevocable (white/black list like most people suggest destroy its purpose).

I will see what I can do.

[MontoyaAndres]

So, is better to use any third party jwt service like (auth0, netlify identity, firebase auth) instead of implementing my own one?

[hoangvvo]

Can you point me to any resources on auth0, netlify identity, firebase auth that use JWT as session?

I'm not saying that we should implement our own. It is not a good idea to implement it at all, in my opinion.

There are use cases for JWT though, but it is in authorization (not authentication). One popular example being ID Token in OpenID Connect Protocol.

[MontoyaAndres]

Just checking the docs you can see, for example, auth0 uses something call "global authentication" like Google does, I mean, if you have:

https://myappforgames.com/

https://myappforsports.com/

https://myappforshoping.com/

Those are the products of your company, what auth0 does is creating their authentication service, for example "https://authentication.auth0.com/" and if the user log in there, he will be logged in in the rest of your projects, like Google does, again. The same is with firebase auth, but simpler and cheaper. (About netlify identity I haven't use it but seems interesting)

And all those work with jwt + sessions easily and with many functionalities

[hoangvvo]

@MontoyaAndres I see the global authentication you talked about. The way Google does it is actually different I think (I do not look a lot into Auth0 so I do not really). If you try to login to Google at accounts.google.com, pay attention to the url bar. You see that it redirect you to youtube.com in a short instance. At that instance, youtube.com set its own session ID (or maybe also a google one too), and redirect you back to google. Google does not do JWT.

[hoangvvo]

It is helpful to pull up your dev tool, go to Network tab, and look at the youtube redirection. See into the Cookies tab to see how a cookie is set.

[hoangvvo]

But surely JWT has its own usecases. Like I mentioned, for example, in authorization. There is this thing called ID Token (I wondered if you have heard). It basically is a JWT Token which contained your user info.

But here is the problem. How does your app or server know if the JWT token actually comes from a trusted provider. A hacker might pretend (to be the auth provider) sending your server a fake JWT which contained bad user info to log in.

Now if the token is signed with RSA encryption. You can verify the incoming JWT Token using a public key.

Sr for bad writing. I would love to write a blog post about this soon.

[hoangvvo]

Also, see my reply in #16 (comment)

[MontoyaAndres]

Yeah, what I'm trying to say is better to implement JWT instead sessions, using services like Auth0, Firebase Auth or whatever, would increase your possibilities of using JWT, and these will be save over a cookie or however you want, more secure than the implementation you're doing now with this project. Also, all these services work over RSA encryptions.

[wortkotze]

Hi @ALL, has someone probably already anything working here. We are trying to build a small product and we started with this boilerplate. But now we created besides the PWA also an react native app and would like to have both in place

could http://www.passportjs.org/packages/passport-jwt-cookiecombo/ be an solution that fits all of us?

[wortkotze]

ok I have seen the proposed libary is already deprecated.
Did someone make a try for jwt so that it can be used with react-native?