Where/how to store refresh token for React Native mobile app?

[jrp-23]

The documentation mentions that refresh tokens must be stored securely by an application. How should we store the refresh token for a React Native mobile app?

[dan.woda]

Hi @jrp-23,

This doc dives into the specifics of the utility classes for storing tokens with auth0 and with iOS and Android.

Hope this helps!

Thanks,
Dan

[jrp-23]

Thanks for the info @dan.woda. I was hoping to do this directly in React Native and not have to code iOS/Android specific solutions. Is there a way to do this with just React Native? I see some articles out there saying to use AsyncStorage, but I also see some articles explaing that AsyncStorage is not secure.

[jrp-23]

Is there an example of how to interact with the native iOS/Android code from React native? It looks like React Native’s Native Modules are one way to do it?

[digitaluniverse]

GitHub - pradeep1991singh/react-native-secure-key-store: React Native Library for securely storing keys to iOS KeyChain and Android KeyStore. is what i use to store my tokens react native sensitive info doesn’t work and is not being updated

[digitaluniverse]

//Here is my somewhat broken code for refresh tokens

componentDidMount () {
    RNSecureKeyStore.get("accessToken").then(accessToken => {
            auth0.auth.userInfo({token: accessToken}).then(data => {this.gotoAccount(data);}).catch(err => {
                RNSecureKeyStore.get("refreshToken").then(refreshToken => { // get the refresh token from the secure storage
                    // request for a new access token using the refresh token
                    auth0.auth
                      .refreshToken({ refreshToken: refreshToken })
                      .then(newAccessToken => {
                        //SInfo.setItem("accessToken", newAccessToken);
                        RNSecureKeyStore.set("accessToken", newAccessToken, {accessible: ACCESSIBLE.ALWAYS_THIS_DEVICE_ONLY})
                        RNRestart.Restart();
                      })
                      .catch(accessTokenErr => {
                        console.log("error getting new access token: ", accessTokenErr);
                      });
                  }).catch(err => {
                    console.log("no refresh token");
                  });
            })
      }).catch(err => {
        console.log("No access token")
        //this.gotoLogin();
      })
  }

//and my login code

login = () => {
  auth0.webAuth.authorize({
    scope: Config.AUTHO_SCOPE,
    audience: Config.AUTH0_AUDIENCE,
    device: DeviceInfo.getDeviceId(),
    prompt: 'login'
  }).then(res => {
    //console.log(res.accessToken);

      //SInfo.setItem("accessToken", res.accessToken, {});
      //SInfo.setItem("refreshToken", res.refreshToken, {});
      RNSecureKeyStore.set("accessToken", res.accessToken, {accessible: ACCESSIBLE.ALWAYS_THIS_DEVICE_ONLY})
      	.then((res) => {
      		console.log(res);
      	}, (err) => {
      		console.log(err);
      	});
        RNSecureKeyStore.set("refreshToken", res.refreshToken, {accessible: ACCESSIBLE.ALWAYS_THIS_DEVICE_ONLY})
          .then((res) => {
            console.log(res);
          }, (err) => {
            console.log(err);
          });

      console.log();

      auth0.auth.userInfo({token: res.accessToken}).then(data => {
        this.gotoAccount(data);
      }).catch(err => {
        console.log("error occurred while trying to get user details: ", err);
      })
  }).catch(err => {
    console.log("error occurred while trying to authenticate: ", err);
  })
}

[jrp-23]

Thanks @digitaluniverse! I will give it a try.

[jrp-23]

react-native-secure-key-store seems like a suitable option. Although I’m curious if Auth0 has plans to release their own NPM module to provide this functionality?

[dan.woda]

Hey folks,

Our content team is working on a new react native blog and I have raised the topic of token storage with them. Thanks for giving us input on the topic. I have heard a lot about react native in the recent weeks!

Thanks all,
Dan

[jrp-23]

Thanks @dan.woda i look forward to the blog. If it is decided to not currently provide token storage functionality, is there a formal feature request process that I can submit this for? I’m also just curious in general about feature requests from the community?

[dan.woda]

@jrp-23,

I mentioned token storage to the writer, and it is known that is a desired topic.

Yes, for formal feature requests please use our feedback page. Every request is read by our product team.

Thanks for asking!