Fix OAuth2 login and logout issues in React application

[yhao3]

Issues

Description

When creating an application with OAuth2 and React, the following issues were discovered:

JHipster version is v8.5.0

1. When a user who is not logged in visits the logout page, infinite logout requests are sent to the backend.

   infinite-logout-requests.mov

2. If there is a non-private route, such as the About page (/about), and the user clicks login on that page and logs in, the Redirect functionality breaks because the local storage records an incorrect redirect URL.

   redirect-issue.mov

JDL

application {
  config {
    baseName blog,
    applicationType monolith
    authenticationType oauth2
    packageName com.jhipster.demo.blog
    prodDatabaseType postgresql
    cacheProvider ehcache
    buildTool maven
    clientFramework react
    testFrameworks [cypress]
  }
  entities *
}

entity Blog {
  name String required minlength(3)
  handle String required minlength(2)
}

entity Post {
  title String required
  content TextBlob required
  date Instant required
}

entity Tag {
  name String required minlength(2)
}

relationship ManyToOne {
  Blog{user(login)} to User with builtInEntity
  Post{blog(name)} to Blog
}

relationship ManyToMany {
  Post{tag(name)} to Tag{entry}
}

paginate Post, Tag with infinite-scroll

Fixes

For issue 1, I made the following changes in logout.tsx:

• When the user is not logged in, redirect them to the root.

Regarding issue 2, I refactored the frontend login flow:

• In routes.tsx, changed the route path of the LoginRedirect component to /sign-in instead of directly using the /oauth2/authorization/oidc endpoint provided by the backend, and then redirected the user to the oauth2/authorization/oidc endpoint in the LoginRedirect component.
• Based on the above change, in url-utils.ts, modified the return value of the getLoginUrl() function to /sign-in route.
• Replaced the login buttons in account.tsx and home.tsx with callback functions that use the useNavigate hook to redirect to the route returned by getLoginUrl(), ensuring the original path of all public routes is preserved.

[mraible]

Closing and re-opening to run tests again.

[mraible]

Thanks for your contribution, @yhao3!