Create & Integrate Keycloak Login theme in Angular Project
Budget: €30 – €250 EUR
I am using keycloak as our authentication system. This is integrated in our angular application via Rest API. We are using Keycloak REST API currently (integrated in Java Microservices), to authenticate users. We would like to switch to Keycloak Login page.
Following should be done
========================
1. Create a customized Keycloak Theme for our website. The keycloak theme should include Login, Register, Password Reset, Manage Profile pages. Note that we don't offer 2-Factor Auth. Therefore, this is not needed in Keycloak Theme
2. Register: The user registers with us using a unique link. The link is first validated via API call. When successful, the user should be redirected to Keycloak Register page to complete registration. After successful registration, should be redirected to Frontend so that we can display the registration success page.
3. Login: When the user comes to our website (https://www.xxx.com), the user should be automatically redirected to Keycloak Login page; after successful login, the user will be redirected to Frontend & then we should display the dashboard.
4. My Profile: This is a menu item. Clicking this menu item should redirect to Keycloak Profile Management page where the user can update his password, name. Email cannot be updated.
5. Password Reset: The user will click "Forgot Password" in Login page. The user will receive a email with unique link & we will display a success msg about the same.
6. Password Reset Link Click - The user will open the email & click the Password Reset link. The Frontend is called, the reset link is validated, then the user should be redirected to Keycloak Reset Password page where the new password can be set. After successful reset, the user should be displayed a success page with a 5 second timer to redirect the Frontend (https://www.xxx.com) which will redirect to login page.
7. Logout: Clicking logout should logout from the keycloak session
8. Updating our REST API - We have Java Springboot Microservices which delivers all the data required to use our Frontend.. for ex, manage users, invite users, data reports etc. These data are retrieved from our database. All these endpoints have "Authorization" header which contains the Keycloak REST API openid-token. Once we switch to Keycloak Theme, this token will not be available. An alternative method should be implemented so that the session token created by Keycloak can be sent to the API & also validated.
Other requirements
==================
1. Customize Keycloak theme to our website theme(We are using a Whitelabel solution). Therefore, the color, images used should be adaptable
2. How to secure keycload admin console from external hacking or malicious requests, if we have to take the authentication on the internet? Currently, this is behind a secured network. Our public API project is the only one having access to keycloak. Keycloak can be directly accessed only within our office network.
References:
https://medium.com/@damilareaadedoyin/authentication-in-angular-using-keycloak-aff8e98dd094
https://blog.bitsrc.io/integrating-keycloak-with-angular-for-sso-authentication-9d1c6c2d2742
https://stackoverflow.com/questions/69097319/from-keycloak-login-how-can-i-get-the-bearer-token-from-keycloak-identity-kc-r
https://scalac.io/blog/user-authentication-keycloak-1/
https://www.npmjs.com/package/keycloak-js
https://github.com/keycloak/keycloak
Following should be done
========================
1. Create a customized Keycloak Theme for our website. The keycloak theme should include Login, Register, Password Reset, Manage Profile pages. Note that we don't offer 2-Factor Auth. Therefore, this is not needed in Keycloak Theme
2. Register: The user registers with us using a unique link. The link is first validated via API call. When successful, the user should be redirected to Keycloak Register page to complete registration. After successful registration, should be redirected to Frontend so that we can display the registration success page.
3. Login: When the user comes to our website (https://www.xxx.com), the user should be automatically redirected to Keycloak Login page; after successful login, the user will be redirected to Frontend & then we should display the dashboard.
4. My Profile: This is a menu item. Clicking this menu item should redirect to Keycloak Profile Management page where the user can update his password, name. Email cannot be updated.
5. Password Reset: The user will click "Forgot Password" in Login page. The user will receive a email with unique link & we will display a success msg about the same.
6. Password Reset Link Click - The user will open the email & click the Password Reset link. The Frontend is called, the reset link is validated, then the user should be redirected to Keycloak Reset Password page where the new password can be set. After successful reset, the user should be displayed a success page with a 5 second timer to redirect the Frontend (https://www.xxx.com) which will redirect to login page.
7. Logout: Clicking logout should logout from the keycloak session
8. Updating our REST API - We have Java Springboot Microservices which delivers all the data required to use our Frontend.. for ex, manage users, invite users, data reports etc. These data are retrieved from our database. All these endpoints have "Authorization" header which contains the Keycloak REST API openid-token. Once we switch to Keycloak Theme, this token will not be available. An alternative method should be implemented so that the session token created by Keycloak can be sent to the API & also validated.
Other requirements
==================
1. Customize Keycloak theme to our website theme(We are using a Whitelabel solution). Therefore, the color, images used should be adaptable
2. How to secure keycload admin console from external hacking or malicious requests, if we have to take the authentication on the internet? Currently, this is behind a secured network. Our public API project is the only one having access to keycloak. Keycloak can be directly accessed only within our office network.
References:
https://medium.com/@damilareaadedoyin/authentication-in-angular-using-keycloak-aff8e98dd094
https://blog.bitsrc.io/integrating-keycloak-with-angular-for-sso-authentication-9d1c6c2d2742
https://stackoverflow.com/questions/69097319/from-keycloak-login-how-can-i-get-the-bearer-token-from-keycloak-identity-kc-r
https://scalac.io/blog/user-authentication-keycloak-1/
https://www.npmjs.com/package/keycloak-js
https://github.com/keycloak/keycloak