Oauth2 Authentication with React Native - react-native

i am trying to add authentication to my app using OAuth2 & also secure the back-end so only logged in users can access it.
Im just trying to wrap my head around the process and some clarification would be great. To my understanding here is how i would do it.
User logs in with oauth2 provider in app.
App sends the returned code to the back-end.
back-end fetches access token and returns to the app to be saved.
now, for all secure requests. I send the accesstoken as a parameter to the back-end which checks if it is valid or not.
would this be the correct way of creating a secure dashboard type app with oauth2?
thankyou.

It's correct except that in step 2 you send the authorization code back to the OAuth2 provider - as part of an authorization code grant message.
Here's an example of the message workflow during a user session. For a mobile app the same OAuth messages are used:
https://authguidance.com/2018/01/18/desktop-app-technical-workflow/
If it helps there are some code samples of mine to demo this behaviour - it is tricky to implement though:
https://authguidance.com/home/code-samples-quickstart/

Related

React Native OAuth2 and REST API authentication flow

I'm having a bit trouble understanding this predicament a REST API supporting React Native (Mobile App) with OAuth2 authentication.
I've managed to setup the OAuth2 flow and can login via OAuth2 provider. This communication is still just between the Mobile App and the 3rd party OAuth2 provider. How can I use those tokens I've obtained (and actually trust the request) to create an account in my REST API so that the server can actually generate a JWT token that will be used for future requests?
Can't seem to find an answer to this question. Would love some help with this one
Ok, I've managed to figure this one out.
To achieve what I want the Client (in this case mobile app) does the authentication flow and will receive an access_token and a refresh_token along with an id_token. The last one (id_token) contains the info about the user which the app should send to my REST API. Once the server receives it it will make an HTTP request to Google (my OAuth2 Provider) to verify that this token is in fact a valid one and issued by them.
After that I just create an account and issue my own token in response to the Mobile's App request.
It's explained here in Google Docs
Most likely all the major identity providers would follow along this path. Or, at least I'm hoping they do.

Firebase Authentication via Cloud Functions using Express

Im building a mobile App using React Native and CloudFunctions as back-end, which will allow only authenticated users to access the RealTime database. In authentication I would like to send to this function the email and password and then the back-end create the user, and send me back the token which I will use to make the request to api. I would to know if the is it possible and the right approach, or should I authenticate the user first directly by my App and then calls the functions with the token that I got ...
If someone have some exemplo would be awesome.
Thanks
Typically the client application performs the signin process so it can make use of the authentication token and keep it refreshed.

Best practice to receive JWT from third party provider?

I am playing with JWT and expressJS to learn something new, and come up with the idea to make my little JWT provider to use for all my future personal projects.
The idea is quite simple, my provider will register with facebook and twitter API, and will use passport to authenticate with them. I will also store users credentials so I don't need to worry about that in my other projects (these project will hold their info about users but various data from socials/passwords etc.. will be in the provider).
I coded this little workflow:
I register the app in my provider with a callback url
Put a button (e.g. 'Login with Twitter') on my project, that links directly to my provider
when I accept the Twitter conditions, twitter callback calls my provider that pick the right user and redirect to my project.
I am stuck on this last point, I would love to pass to my project the JWT token to use for its next requests, but how do I pass to it?
Cannot set cookie because domains are different obviously, I am missing something? Did I follow the wrong way?
The authentication flow you describe is similar to OAuth2. I suggest to read the RFC 6749. It explain the technical details to implement it. You can also refer to OpenID Connect. It is an extension of OAuth2 using JWT
Basically you need to create an access token after a successful login and return a redirection to the callback url. The adapted flow to your context could be the following
App redirects user to central login form
The server prompts user for the credentials :It returns an HTML form with the supported authentication methods, that can include a connection with a third party authentication provider
After a successful authentication, the server creates an access token. It can be a JWT
The server returns a redirection to the provided callback url. It includes an authentication code
The app request the authentication server using the previous code and get an access token
The token can be used by app to access to a protected resource
In Oauth2, the access token it is just a random string, but you can use JWT perfectly.

React Native Instagram Explicit Authentication

I'm creating a react native app and adding instagram authentication to it. I want users to be able to "add" their instagram accounts to their main user account, so I have a "connect your instagram" button.
I have this working on my web app fine.. The flow is as follows:
User clicks 'connect instagram' button and a new window opens and is directed to https://instagram.com/oauth/authorize/?client_id=xxxx blah blah
User authenticates and instagram redirects to my REDIRECT_URI with a CODE parameter
My API server takes the CODE parameter and sends a post request to instagram with all the credentials.
Instagram verifies this information and gives me the users ACCESS_TOKEN
Can someone tell me how this is supposed to work in an app?
What's my REDIRECT_URI supposed to be? The server api?
Is it the same flow as my web app? If so, how do I get the users back to my app after the window is closed. How does my app know that the user now has an access token?
With a native application the flow is similar to what you described for the web application.
The Auth0 Mobile + API architecture scenario describes what should happen when you need to authenticate a user for a mobile application and then later access an API on behalf of that user.
Summary
you will continue to use the authorization code grant;
if the authorization server in question supports it you should use the PKCE (Proof Key for Code Exchange by OAuth Public Clients) for added security;
you will need to select how you will receive the code in the native application; you can use a custom scheme com.myinstaapp:, a local web server with the http: scheme or a few other options; (see this answer on OAuth redirect URI for native application for other alternatives)
you exchange the code obtained by the native application with an access token in a similar way to what you would do for a web application; (except for the use of client secrets which are in general not useful for native applications as they would be easily leaked)
Additional Information
The flow described in the Auth0 scenario assumes that authentication will happen through an OpenID Connect compliant flow and in addition you'll get the access token as specified by OAuth2. I'm not overly familiar with Instagram so if they only support OAuth2 that part is of course not applicable.

Token authentication in SPA app

I started new project. It is small application (playground) to learn couple new concepts. I will create backend API using Ruby on Rails and Single Page Application using React. I stuck in Authentication. I would like to create custom Token-based Authorization/Authorization. I came to following auth flow:
User fill password/login and send to backed using Ajax and through secured HTTPS connection.
Backed checks if user exist in DB. If user exist backend create Token and save to Redis with user id.
Backend response with token to client app.
On client side I will save above token to local storage.
Before every request I will get token from locale storage and pass to request header.
On backend I will take token from header and check if exist in Redis db.
Is this flow correct? Should I decrypt token on client side or It is not necessary? This project is only playground but I would like to do It properly. Please give me some comments if above flow isn't good enough.
I think that you have the right approach. This link could give you more details about token-based authentication:
Implementing authentication with tokens for RESTful applications - https://templth.wordpress.com/2015/01/05/implementing-authentication-with-tokens-for-restful-applications/
Hope it helps you,
Thierry