CODEWITHSUNDEEP
androidreact-nativeoauth-2.0
Jasper Lankhorst
Jasper Lankhorst

Reputation: 2016

react native android oauth2

I am developing a react-native application, in this application im trying to authenticating using oauth2. Now im trying to use a webview to retrieve my redirect_uri credentials, but im unsure how to retrieve it in react-native on a Android device.

I have found a example but it doessnt explain how to get the acces token in a variable, and I dont know how to implement this inside react-native.

for this purpose I am trying to use a implicit flow.

Grant Type: Implicit The implicit grant type is used for mobile apps and web applications (i.e. applications that run in a web browser), where the client secret confidentiality is not guaranteed. The implicit grant type is also a redirection-based flow but the access token is given to the user-agent to forward to the application, so it may be exposed to the user and other applications on the user's device. Also, this flow does not authenticate the identity of the application, and relies on the redirect URI (that was registered with the service) to serve this purpose.

The implicit grant type does not support refresh tokens. The implicit grant flow basically works as follows: the user is asked to authorize the application, then the authorization server passes the access token back to the user-agent, which passes it to the application. If you are curious about the details, read on. https://www.digitalocean.com/community/tutorials/an-introduction-to-oauth-2

Integrate oauth2 with native (iOS/Android) mobile application

My question is what should my redirect_uri be? How can I retrieve the variables on react-native Android? Is 'implicit flow' the way to use on a mobile application?

Upvotes: 2

Views: 4724

Answers (3)

Jasper Lankhorst
Jasper Lankhorst

Reputation: 2016

First you start looking which oauth2 flowtype is the securest one for your application in question by looking what other recommend.

After that I looked at 'implicit versus password grant_type' and looked up the fields which are required:

https://www.rfc-editor.org/rfc/rfc6749

I made sure a authorized endpoint is active for testing (by making one active yourself with the correct grant_type) Next I wondered how to fill all the fields. By installing postman, i could analyze and make a POST call myself.

After that you look up your url which in my case was : localhost:8000/oauth/token and post against it using postman.

I was stuck on the part that you can't use JSON on the request body, but instead the oauth request needed to be in 1 long parameter called 'body' as a string. This is the way a httprequest works.

//authorization grant type: Resource owner password-based.
const HOST_ADRESS = "192.168.104.137:8000"; //change with your own host 
const client_id   = "jpijpijpijpijipjipijipijipijipj";
fetch('http://'+HOST_ADRESS+"/oauth/token/", {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        'Cache-Control': 'no-cache'
    },
    body: "client_id=sfjwepifjpfweijgpeijSGIOEJOPGIWSJA35340537530708&grant_type=password&username="+username+"&password="+password
})
    .then((response) => response.text())
    .then((responseText) => {
        console.log(responseText);
        //redux succed do something.
        //dispatch(actionsCreators.succesLogin(responseText));
    })
    .catch((error) => {
        const data = {error: "A error happened"};
        //redux error.   
        //dispatch(actionsCreators.errorLogin(data));
        console.warn(error);
    });

Hopefully someone else learns something coming across the steps I took. Only need to save the token somewhere in a database to check (sql lite ) or realm.io (yay for next steps.)

Upvotes: 4

Sergio Flores
Sergio Flores

Reputation: 5427

This is a very interesting example: https://github.com/bartonhammond/reactnative-oauth-hapi

Upvotes: 0

Lucky
Lucky

Reputation: 85

First, you should choose the right grant type based on where you are trying to log in. If the service is yours, you can go with grant type password. If the service is third party, you can use implicit type. You provide redirect uri, which has to be registered with that particular service and which is used to redirect user after he is authentized. Finally, there is a network API in React Native where you use fetch (see docs). As a second parameter to this function, you can provide additional informations and header. This is where you set all the required informations provided in the oAuth2 docs.

Upvotes: 1

Related Questions