Build Mobile Apps with Angular, Ionic 4, and Spring Boot
Learn how to use Ionic for JHipster to create a bad-ass PWA / mobile app that runs on iOS and Android. JWT, OIDC, and microservices are all supported!
David Kapanga
nice tutorial, but what if I use JWT? how do I configure the login process?. I generate an ionic on my existing jhipster project, but all I get is 403 (forbidden) when trying to login or create an account, and on my backend server I got this message
Forbidden: Could not verify the provided CSRF token because your session was not found.
Resolved [org.springframework.security.web.csrf.MissingCsrfTokenException: Could not verify the provided CSRF token because your session was not found.]
do you have any idea how to solve this? because everything works on my monolith frontend angular that was generated with the backend server by jhipster but on the ionic all request are forbidden.
Biswadeep Basu
Hi Matt,
I tried following the steps mentioned in this tutorial. But I come across a CORS issue, whenever I try to login from the Ionic app. the web app login works perfectly.
I even tried to clone and execute the same set of steps mentioned in your git repo
https://github.com/oktadeve…
But its the same error
Access to XMLHttpRequest at 'https://dev-xxxxxx.okta.com… from origin ‘http://localhost:8100’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Sign in error: Error: Unable To Obtain Server Configuration
I tried updating the src/main/resources/config/application.yml as shown in the below video https://www.youtube.com/wat…
I even tried the @oktadev/schematics plugin https://www.npmjs.com/packa…
Biswadeep Basu
As a work around, I have added ‘http://localhost:8100’ as a trusted origin in my Okta applicaton. But a real solution will be more helpful.
Matt Raible
Hello David,
If you’re using JWT, things should just work.
Are you running your JHipster app in prod mode? If so, you might need to adjust your CORS settings in application-prod.yml. I haven’t seen any CSRF issues.
I’d be happy to try and reproduce the problem. Can you provide the JDL for your JHipster project? Or run jhipster info on it and paste the output in a <pre><code> block? If it’s easier, you can also create a new issue in generator-jhipster-ionic.
David Kapanga
thank you!!! the problem was about version of Jhipster, ionic is only available for Jhipster 6.1 above, after I updated my app all works now!! Thank you.
Илья
Hi Matt, how can I migrate some screens of the initially Angular website to the Ionic app, if they are some external scrips executed on the page like Stripe.js and so on? So, how can I have the same features (reacher than CRUD) on the angular and ionic apps to make them being written once, not rewritten for the ionic app (so make them being executed as a true PWA)?
Matt Raible
If you want to have pages and services that you share between your Angular and Ionic app, you’ll probably want to create a library that you can import into both projects. See Angular’s creating libraries documentation for more information.
Илья
Thanks Matt. Am I right, that I will not need this when turning the angular app to the PWA? Is the example for turning the jHipster app to the PWA is available anywhere?
Matt Raible
This is the correct solution. When you create a new application on Okta, the login redirect URIs you add are automatically added as trusted origins. If you add the login redirect URIs after, you need to manually add the trusted origins.
Matt Raible
I converted a JHipster + React app to use JHipster last week and discovered there’s two steps (there used to only be one).
1. Uncomment the service worker in src/main/webapp/index.html.
<script>
if (‘serviceWorker’ in navigator) {
window.addEventListener(‘load’, function() {
navigator.serviceWorker.register(’/service-worker.js’)
.then(function () {
console.log(‘Service Worker Registered’);
});
});
}
</script>
2. Add https://storage.googleapis.com to the content security policy in SecurityConfiguration.java
@EnableWebSecurity
public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http
…
.and()
.headers()
.contentSecurityPolicy("default-src ‘self’; script-src ‘self’ " +
"‘unsafe-inline’ ‘unsafe-eval’ https://storage.googleapis.com; " +
“style-src ‘self’ ‘unsafe-inline’; img-src ‘self’ data:”)
.and()
…
}
}
Илья
Thank you so much, Matt! Is it possible to write a separate article about it? I’m not sure that many people interested into turning the Jhipster app into PWA will find the right instruction in the comment.
Matt Raible
It should be as simple as commenting out the service worker initialization code in index.html. The fact that it requires an addition to the CSP policy is a bug IMO. I created a pull request to fix it.
There is a section in the generated README that details how to enable PWA support. If you think more details are needed in this section, please comment on my PR.
HageneLabz
How would you go about deploying this? I have an app that is using JWT and can communicate locally. Not sure as to how to deploy this so i can distribute an apk and it work for others.
Thanks
Fadi Abu Alnaser
Thank you for this tutorial it’s very easy to understand it but I am facing a issue with navigate to root method is not work with me I spend hours trying to solve it but couldn’t found any solution.
this pice of code not work for me this.navController.navigateRoot(’/tabs’);
Fadi Abu Alnaser
it was wrong config in src/environments/environment.ts my application port was 8282 not 8080
Matt Raible
You should be able to deploy your JHipster backend to anyone that supports Java. Heroku, Cloud Foundry, Google Cloud, etc. For the frontend, you’ll need to publish it in an app store for iOS and Android. If you want to deploy Ionic as a PWA, you can use Firebase, Heroku, or pretty much anyone since it’s just a static site. Here’s Ionic’s PWA publishing docs.
Matt Raible
Biswadeep - thanks for pointing out this issue. I’ve added a section on adding http://localhost:8100 as a trusted origin.
李毅
Hi Matt，may i replace angular to vue js
Matt Raible
Ionic has beta support for Vue, so it’s possible.
The Ionic module for JHipster only supports Angular, so you’d have to write the code yourself.