Search code examples
spring-bootspring-securityoauth-2.0spring-security-oauth2

Create the custom login page in Spring Security in other server?

My project has frontend on Vue, and backend in Spring Boot. Also I have implemented the Java Spring Security as my Authentication method. I have created a custom login page with Thymeleaf.

But the thing is, I want to use my components on Vue, here in the login page. Meaning that I want my login page to be in Vue, whilst having the authentication service in backend.

I was researching online but I couldn't find any example. I wonder if that's possible. I mean, simply creating the custom login page on frontend and using Java Spring Security, OAuth2 as well.

Solution

  • One of the important features of OAuth2 is to completely remove user credentials from public clients (apps written with Vue, React, Angular, etc. are public clients).

    Your apps should never be aware of users login, password, MFA tokens, etc.. Only authorization-server (along with its confidential client) should. This is why the first step of authorization-code flow is a redirect to the authorization-server.

    HTML and CSS should be enough to customize authorization-server login form. I would carefully avoid any client-side framework when manipulating user credentials.

    How I proceed in my apps

    • Style (only) authorization-server login forms to integrate it with applications look & feel. Refer to your authorization-server doc for that (in Keycloak, you can provide custom "themes" for instance).
    • Choose an OAuth2 client library for your Vue application. It can handle redirect to and from authorization-server, exchange authorization-code for an access-token, refresh access-tokens before it expires, attach an Authorization header to the requests sent to a list of URIs you define, ...
    • Configure your Spring API as resource-server.

    For the Vue OAuth2 libs, you might search with OpenID keyword. Major OAuth2 authorization servers support OIDC.

    An article which includes Vue app configuration as OpenID client: https://damienbod.com/2019/01/29/securing-a-vue-js-app-using-openid-connect-code-flow-with-pkce-and-identityserver4