Strategy to integrate Azure in REST-server and Angular-frontend

I have a Spring-Boot app. It has a very simple webpage by Thymeleaf integrated.
For user authentication it uses O365 Azure.

     <dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-oauth2-client</artifactId>
	</dependency>
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-web</artifactId>
	</dependency>
	<dependency>
		<groupId>com.azure.spring</groupId>
		<artifactId>azure-spring-boot-starter-active-directory</artifactId>
	</dependency>

I have the app registered in Azure and all is working well. I have a tenant-id, client-id and a client-secret inside my application.properties.

azure.activedirectory.tenant-id = xxxxxx
azure.activedirectory.client-id = xxxxxx
azure.activedirectory.client-secret = xxxxxx

I do not have much more about Azure. All is done by

import org.springframework.security.oauth2.client.*;

and

@SpringBootApplication
@EnableWebSecurity 

as far I can say.

The user is authenticated by Azure before the webpage is presented. Again - all is fine that way.

NOW the functionality of the simple webpage needs to grow.
My simple webpage should become an Angular app and my Spring-Boot app should become the REST-server for it.

How do I handle the Azure authentication now? Should I keep it the way it is? How do I get it into my Angular app?
Do I need to handle Azure in both apps or just in one and integrate the other part somehow?

I see the handling of Azure in Spring-Boot and I also found the MSAL-lib for Angular. But I am not sure how they (the Angular app and my Spring-Boot app) interact together. Or maybe there is no need to interact (regarding authentication) and both apps can handle it separately and Azure will make sure about the rest (SSO)?

I would appreciate a little guidance, thanks!

A REST API is a resource-server, not a client. You'll have to change the Spring boot starter and adapt the web security configuration accordingly.

OAuth2 requests authorization is the responsability of the client. This includes setting the Authorization header with an access token as well as handling the OAuth2 flows to get this token. A resource-server just cares if the request is authorized, if the access token is valid and if it should grant the requested access to the resource based on the claims (in a JWT or introspected).

There are currently two main patterns for "rich" browser apps (Angular, React, Vue, etc.) consuming an OAuth2 resource server:

• the app is configured as an OAuth2 public client (using an OAuth2 client lib). For Angular, I use angular-auth-oidc-client.
• a Backend For Frontend (a middleware on your server) is configured as an OAuth2 confidential client to hide tokens from the app in the browser (which is secured with sessions on the BFF). The BFF is in charge of login, logout, token refreshing, and replacing session with access token before forwarding the browser request to the API. spring-cloud-gateway configured with spring-boot-starter-oauth2-client (like your current app is) can be used as BFF if TokenRelay= filter is activated.

The second option is considered preferable because of added security (usage of a confidential client so that tokens can't be delivered to program pretending to be the client, and tokens are hidden from Javascript) ... provided that you handle correctly CSRF protection and session cookies (which must be at minimum secure and http-only, and ideally flagged with samesite)

I wrote some tutorials which cover various OAuth2 configuration scenarios for Spring applications, both resource servers and clients (including gateway as BFF).