Jasper Lankhorst Jasper Lankhorst - 6 months ago 72
Android Question

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?

Answer

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

After that you go look for implicit versus password grant_type and look up the field required:

https://tools.ietf.org/html/rfc6749

You make sure a authorized endpoint is active (by making one active yourself with the correct grant_type) After that you wonder how to fill in all the fields. By installing postman. After that you look up your url which in my case was : localhost:8000/oauth/token and post against it.

After it I looked up what fields I needed and tried to make the fetch command. I was stuck on the face that you can't throw JSON to it, but needed to be in 1 long parameter body string. The way x-www-form-urlencoded' appearantly 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.)