Generator-jhipster: Oauth2 and React "Network Error" On Homepage

[mertmr]

Overview of the issue

React and oauth generated apps produce "Network Error" on the homepage. Keycloak works properly, I can use the sign in link and login with the admin/admin credentials on the Keycloak login page. We are nearing our production deadline and this kind of error on the home page is really annoying. Also couldn't find a way to suppress the message. Any quick work around will be appreciated. I did find some similar issues with traefik but I guest it is not related, so I opened up a new issue.

Motivation for or Use Case

I guess "Network error"s on the home page is annoying for all of us I guess :)

Reproduce the error

Generate application using the jdl below:

application {
  config {
    baseName testReactOauth
    applicationType monolith,
    authenticationType oauth2,
    clientFramework react
  }
}

After generating application, docker compose up keycloak:
docker-compose -f src/main/docker/keycloak.yml up -d

Maven spring boot up:
./mvnw

Visit localhost:
http://localhost:8080/

Two React toast messages will pop up.

JHipster Version(s)

Jhipster: 6.1.2

Environment and Tools

java version "1.8.0_201"
Java(TM) SE Runtime Environment (build 1.8.0_201-b09)
Java HotSpot(TM) 64-Bit Server VM (build 25.201-b09, mixed mode)

git version 2.18.0

node: v8.10.0

npm: 6.9.0

yeoman: 3.1.0

yarn: 1.7.0

Docker version 18.09.2, build 6247962

docker-compose version 1.23.2, build 1110ad01

Browsers and Operating System

MacOS Sierra 10.12.6 (16G29)
Google Chrome Version 75.0.3770.100

• [x] Checking this box is mandatory (this is just to show you read everything)

[mraible]

I've recently seen this as well. @deepu105 do you know how to fix this?

[deepu105]

I thought I already did a PR to fix it. Need to check

On Tue, 9 Jul 2019, 12:49 am Matt Raible, [e-mail] wrote:

I've recently seen this as well. @deepu105 https://github.com/deepu105
do you know how to fix this?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/jhipster/generator-jhipster/issues/10056?email_source=notifications&email_token=AAIOKF2JCWNKXSN3GO2AALDP6PABDA5CNFSM4H65BAFKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZOSE3I#issuecomment-509420141,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAIOKF4PUWKGBXRDHGELQYDP6PABDANCNFSM4H65BAFA
.

[mertmr]

I thought I already did a PR to fix it. Need to check
…
On Tue, 9 Jul 2019, 12:49 am Matt Raible, @.*> wrote: I've recently seen this as well. @deepu105 https://github.com/deepu105 do you know how to fix this? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#10056?email_source=notifications&email_token=AAIOKF2JCWNKXSN3GO2AALDP6PABDA5CNFSM4H65BAFKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODZOSE3I#issuecomment-509420141>, or mute the thread https://github.com/notifications/unsubscribe-auth/AAIOKF4PUWKGBXRDHGELQYDP6PABDANCNFSM4H65BAFA .

Any luck finding that PR? :)

[SudharakaP]

@deepu105 : Is this already been worked on? I can work on this issue if you guys are okay? 😄

[pascalgrimaud]

@SudharakaP : you're mostly welcome !

[atomfrede]

Is it the csp again? But in general Oauth/Keycloak worked last time I checked. Can have a look too if you are busy @SudharakaP

[clementdessoude]

I don't think it is since the same issue was raised in #8920, long before #9834

[SudharakaP]

@atomfrede : I was looking at this issue yesterday. It isn't the same; there's something going on here which I didn't have time to deep dive yesterday. If you have time or like to work on this please feel free to take it; otherwise I can work on it too. :smile:

[SudharakaP]

@atomfrede : Also just to give you some more information from my analysis; notice that if you generate the same kind of application but with angular front end; you'll still see the "Cross origin" warning but will not see any error. I didn't have time to think about this more; but I think the error throwing on the react side probably should need a rethink. :thinking:

[SudharakaP]

I've created a simple fix for this; the problem is initially when the user visits the homepage it seems we are making a request to api/account; you'll see this in the angular side too. And if the user doesn't have an active session we return an error. But it seems that on the react side we do a toast message with a generic message; Network Error. Since this error is harmless and expected, I've added a small condition to just log it to the console instead. Maybe there's different ways of handling this; if you have any other suggestions feel free to let me know. 😄