Home > AI > Frontend > ReactJS >

ReactJs app Single Sign On (SSO)

Two sets of APIs require integration: the User module and the Question module.

Regarding the User module, I’m a bit uncertain because there are two approaches.

One is to utilize the previous set of user login/register APIs, construct the login form on each client, and configure social login. The alternative method involves redirecting to the Authorization Server’s central login form, which my current PTE Resource Server uses. The latter method seems appealing as it would save effort in each client. I’ll start from this approach.

I have a few clients: one for the Springboot Sample OAuth2.0 client and another for the SpringBoot PTE Resource server. Initially, I intended to reuse these existing two clients. However, I’ve realized that my ReactJs app runs on a different port (3000 during the testing stage). So, these two clients won’t function properly.

As for registering the client, I’m facing a bit of a challenge. My previous method involved hard-coding it in the initial data population.

The following table compares the steps via SetupDataLoader and via UI.

via SetupDataLoadervia UI
add new client
local: mvn rebuild
local: rsync
server: clean database
server: stop application
server: restart application
add new client

I aim to develop a UI page for adding a new client without the need to restart the SpringBoot application and reinitialize the database each time.

My approach is quite ambitious. The current modulized architecture of my SpringBoot setup is adaptable and capable of expanding to accommodate additional Resource Servers in the future; presently, there are already four Resource Servers in place.

The existing RBAC (Role-based Access Control) system encompasses entities of User, Role, Privilege, and Client. Both the “User and Role” and “Role and Privilege” relationships are established as Many-To-Many. The Client stands as an independent entity, where the ‘scope’ field relates to privileges.

In my ambitious plan, I aim to introduce a new entity called “Application.” This addition would allow me to gather specific information, such as the user count per application and application count per user. When registering a new client, the process involves selecting from a list of applications, and upon selection, the associated privileges are made available. This enables the client to choose scopes based on the selection.

Let’s chew the big cake bit by bit.

Firstly, collect what information I need to register a client

  String clientId4 = "apppte-client";
        if (mnRegisteredClientRepository.findByClientId(clientId4) == null) {
            RegisteredClient apppteClient = RegisteredClient.withId(UUID.randomUUID().toString())
                    .clientId(clientId4)
                    .clientSecret(passwordEncoder.encode("secret"))
                    .scope(OidcScopes.OPENID)
                    .scope(OidcScopes.PROFILE)
                    .redirectUri("https://cowpte.com:8705/login/oauth2/code/apppte-client-oidc")
                    .redirectUri("https://cowpte.com:8705/authorized")
                    .postLogoutRedirectUri("https://cowpte.com:8705/")
                    .clientAuthenticationMethod(ClientAuthenticationMethod.CLIENT_SECRET_BASIC)
                    .authorizationGrantType(AuthorizationGrantType.AUTHORIZATION_CODE)
                    .authorizationGrantType(AuthorizationGrantType.REFRESH_TOKEN)
                    .clientSettings(ClientSettings.builder().requireAuthorizationConsent(true).build())
                    .build();
            mnRegisteredClientRepository.save(apppteClient);

Relevant tags:

Leave a Reply