Implementing User Registration in Keycloak with Flutter and React Frontends

Question

I'm working on a project that involves a Flutter frontend, a React frontend, and a Spring Boot backend. I aim to handle authentication using Keycloak. However, I've encountered an issue: I can't seem to find a REST endpoint for user registration in Keycloak.

What I need is an endpoint where I can send user data (like username, password, etc.) directly from the frontend to Keycloak for registration. Currently, I've found endpoints for login and for admin-level user creation, but these don't suit my requirement where users should be able to register themselves.

At the moment, user registration is handled by sending user data (username, password, email, etc.) from the frontend to our Spring Boot backend, where users are registered. Here's a snippet of our current registration function in Flutter:

Future<UserLogin?> register(String username, String password, String email,
      String firstName, String lastName, String gender) async {
    final signUpDto = (UserRequestTOBuilder()
          ..username = username
          ..password = password
          ..email = email
          ..firstName = firstName
          ..lastName = lastName
          ..gender = gender)
        .build();

    final responses =
        await Future.wait([_authApi.registerUser(userRequestTO: signUpDto)]);
}

I want to shift this process so that user registration is directly handled by Keycloak, without routing through our Spring Boot backend.

Could anyone provide guidance or a solution for this? Is there a way to achieve user self-registration in Keycloak, or do I need to approach this differently? I'm relatively new to Keycloak and would appreciate any help or insights.

Thanks in advance!

ch4mp · Accepted Answer · 2024-02-28 15:18:35Z

1

In OAuth2, you don't create or login users from OAuth2 clients or frontends (single page or mobile applications). This is authorization server business (Keycloak in your case).

Keycloak already provides screens for login (including multi-factor authentication and social login like "login with Google"), user registration, account management (enable users to edit on their account what you allow them to) and account deletion. It also provides you with the ability to use your own styles to keep your frontends look & feel. Use that.

P.S.

This is not the subject of your question, but SPAs and mobile apps should not be OAuth2 clients (fetch & store tokens). You should be using the BFF pattern instead (see the conclusion from Spring Security team in the thread I just linked). I wrote a tutorial for that on Baeldung.

edited Feb 28, 2024 at 15:18

answered Dec 7, 2023 at 18:00

ch4mp

13.9k6 gold badges44 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shopme Confirm Over a year ago

From your explanation, it seems that instead of trying to create a dedicated endpoint for user registration, I should direct users to the Keycloak login page. Here, they can either log in or register, and upon completion, they are redirected back to the home page of my application

ch4mp Over a year ago

Yes, that's the idea. One of the features proposed by Keycloak that you might be interested in and forgot to mention is social login ("login with Google" and so on).

Collectives™ on Stack Overflow

Implementing User Registration in Keycloak with Flutter and React Frontends

1 Answer 1

P.S.

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

P.S.

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related