Build a Mobile App with React Native and Spring Boot

Build a Mobile App with React Native and Spring Boot

In this tutorial, you’ll learn how to build a Spring Boot API and a React Native app. You’ll also see how to deploy the API to Cloud Foundry and Google Kubernetes Engine.

Edem Morny

Hi. Thanks very much for this blog. It’s been very helpful.

I’m able to configure Okta with my react-native app to authenticate via PKCE. However, I experience 2 problems when testing in Android
1. After entering my username and password on the Okta login screen, i’m stuck on that screen and it doesn’t navigate back to the screen that invoked the login process. I’ve checked my redirectUrl and it seems correct. I end up closing the okta login screen, refreshing my app in dev mode and then seeing the token take effect. What else can i do?
2. More importantly, the whenever i use the accessToken i obtained to make a REST call to my Spring Boot application, i get a 401- Invalid Token message. I have no idea what to do with this one.

Will be very glad for your help as i’m stuck now and don’t know how to move forward. My app is generated with JHipster 6.1.2 and the mobile is generate with your Ignite CLI 2.2.2 and Ignite JHipster 2.0.3

Matt Raible

Hello Edem,

I think you might need to use a newer version of Ignite JHipster for JHipster 6. The latest release is v3.1.5. It looks like OAuth 2.0 login was fixed in 3.1.2. Please let me know if this helps. If it does not, I’d recommend trying this tutorial again with the versions it uses.

Shahzad Munir

I am facing this issue, can you please help me resolve this. I need an urgent resolution of this issue to meet a close deadline
https://stackoverflow.com/q…

Kishore Kunapareddy

When deploying to okta the below change has to be done, otherwise service will throw errors as per https://www.jhipster.tech/s…

Modify src/main/resources/config/application.yml to use your Okta settings. Hint: replace {yourOktaDomain} with your org’s name (e.g., dev-123456.okta.com).

security:
oauth2:
client:
provider:
oidc:
issuer-uri: https://{yourOktaDomain}/oauth2/default
registration:
oidc:
client-id: {client-id}
client-secret: {client-secret}

One more thing specify http://localhost:8080/login/oauth2/code/oidc as a Login redirect URI, then only it will work.

Matt Raible

Thanks for the tips @disqus_0d0SteHbxa! These steps are only necessary if you omit the version numbers for JHipster and Ignite JHipster when doing this tutorial. You are correct in that they won’t work for JHipster 6. That’s why I specify the version numbers in all the install commands. :slight_smile:

Kishore Kunapareddy

That is right :), I have omitted version numbers and faced these issues, thanks for pointing it out :).

Thank you very much for such a wonderful post.

Hi Matt,

Thank you for the wonderful article, I have been trying to follow this for days but most of the stuff here has changed. I have been using JHipster 7.9.3.

Everything worked great on the API side but I have been having hard time using ignite.

Looks like ignite was replaced by generator-jhipster-react-native, so I used the command jhipster --blueprints react-native. I used both options by specifying API locatgion and also by using jdl, it doesn’t look like it is generating the two Auth files you mentioned in your article. I ran into the error “Error fetching auth info from backend” when using Expo web option. I don’t understand the role that Expo plays here, I created expo profile, created an app and initialized it after generating react-native app, still ran into the same issue on the web, also I tried using android App where I ran into “Error: The system cannot find the path specified”.

I am data engineer so my app development skills are not that great, I think I ran into a deadend, could you please update this article?

Hello!

I wrote a newer tutorial last year that uses a more recent version of React Native JHipster.

Does this help?

NOTE: I also released version 4.4.0 of the blueprint a couple of weeks ago.

I appreciate your efforts. I recommended to my brother that he connect to you because he is very interested in the Spring Book API.