Angular & Java Quickstart

This is a quickstart guide to help you integrate Descope with your Angular & Java application. Follow the steps below to get started.

Install Frontend SDK

Install the SDK with the following command:

Terminal

npm i --save @descope/angular-sdk

Then, add Descope type definitions to your tsconfig.ts

tsconfig.ts

"compilerOptions": {
  "typeRoots": ["./node_modules/@descope"],
  // ... other options
}

Import and Wrap Application with Descope Angular SDK

Start by importing Descope then add the Angular SDK to your application. You will need your Project ID from Project Settings in the Descope Console.

Note

You can also add the optional baseUrl parameter if you're utilizing a CNAME within your Descope project (ex: https://auth.company.com).

app.module.ts

import { NgModule, APP_INITIALIZER} from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DescopeAuthModule, DescopeAuthService, descopeInterceptor } from '@descope/angular-sdk';
import { AppComponent } from './app.component';
import {
	HttpClientModule,
	provideHttpClient,
	withInterceptors
} from '@angular/common/http';
import { zip } from 'rxjs';
 
export function initializeApp(authService: DescopeAuthService) {
	return () => zip([authService.refreshSession(), authService.refreshUser()]);
}
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    DescopeAuthModule.forRoot({
      projectId: 'YOUR_PROJECT_ID'
    })
  ],
  providers: [
    {
        provide: APP_INITIALIZER,
        useFactory: initializeApp,
        deps: [DescopeAuthService],
        multi: true
      },
      provideHttpClient(withInterceptors([descopeInterceptor]))
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Import Descope Functions and Add Flows Component

To trigger the Descope Flow, you will need to add this component in your Angular template. The screens you've customized in your Flow will appear here. You can also customize the component with the following:

flowId: ID of the flow you wish to use
onSuccess and onError: functions that execute when authentication succeeds or fails

Note

For the full list of component customization options, refer to our Descope Components Customization Doc.

app.component.html

<div style="max-width: 1000px; margin: 0 auto; place-items: center;">
    <descope
        flowId="sign-up-or-in"
        (success)="onSuccess($event)"
        (error)="onError($event)"
    ></descope> 
</div>

Utilize the Angular SDK Hooks and Functions

Descope provides many different hooks to check if the user is authenticated, session is loading etc. You can use these to customize the user experience:

isAuthenticated: Boolean for the authentication state of the current user session.
user: Returns information about the currently authenticated user.
logout(): Logs out the currently authenticated user.

Note

For the full list of available hooks and functions, refer to the Auth Helpers Doc.

app.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { DescopeAuthService } from '@descope/angular-sdk';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  isAuthenticated: boolean = false;
  token: string = "";
  constructor(
    private router: Router,
    private authService: DescopeAuthService
  ) {}
 
  ngOnInit() {
    this.authService.session$.subscribe((session) => {
      this.isAuthenticated = session.isAuthenticated;
    });
    this.authService.user$.subscribe((descopeUser) => {
      if (descopeUser.user) {
        this.userName = descopeUser.user.name ?? '';
      }
    });
  }
 
  logout() {
    this.authService.descopeSdk.logout();
  }
}

At this point, you're done with the frontend. If you would like to also handle Session Management in your backend, keep on reading!

Install Backend SDK

Install the SDK by including the SDK in your pom.xml file (for installation via Maven).

pom.xml

<dependency>
	<artifactId>java-sdk</artifactId>
	<groupId>com.descope</groupId>
	<version>1.0.25</version>
</dependency>

Import and Setup Backend SDK

You'll need import and setup all of the packages from the SDK.

If you're using a CNAME with your Descope project, make sure to export the Base URL (e.g. export DESCOPE_BASE_URI="https://api.descope.com") when initializing descope_client.

Application.java

package com.descope.java_sample_app;
 
// descope imports start
import com.descope.client.*;
import com.descope.exception.DescopeException;
import com.descope.model.jwt.Token;
import com.descope.sdk.auth.AuthenticationService;
// descope imports end
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.RestController;
 
@SpringBootApplication
@RestController
public class JavaSampleAppApplication {
 
	public static void main(String[] args) {
		SpringApplication.run(JavaSampleAppApplication.class, args);
	}
 
}

Implement Session Validation

You will need to then fetch the session token from the Authorization header of each request, and use the SDK to validate the token.

The frontend SDK will store the session token in either a cookie or your browser's local storage. If using a cookie, the token will be sent to your app server automatically with every request.

Application.java

@SpringBootApplication
@RestController
public class JavaSampleAppApplication {
 
	public static void main(String[] args) {
		SpringApplication.run(JavaSampleAppApplication.class, args);
	}
	
	public void validateSession(String sessionToken, String refreshToken) {
		var descopeClient = new DescopeClient(Config.builder().projectId("__ProjectID__").build());
 
		// Validate the session. Will return an error if expired
		AuthenticationService as = descopeClient.getAuthenticationServices().getAuthService();
		try {
			Token t = as.validateSessionWithToken(sessionToken);
		} catch (DescopeException de) {
			// Handle the unauthorized error
		}
 
		// If ValidateSessionWithRequest raises an exception, you will need to refresh the session using
		try {
			Token t = as.refreshSessionWithToken(refreshToken);
		} catch (DescopeException de) {
			// Handle the unauthorized error
		}
 
		// Alternatively, you could combine the two and
		// have the session validated and automatically refreshed when expired
		try {
			Token t = as.validateAndRefreshSessionWithTokens(sessionToken, refreshToken);
		} catch (DescopeException de) {
			// unauthorized error
		}
	}
	
}

Congratulations

Now that you've got the authentication down, go focus on building out the rest of your app!

Checkpoint

Your application is now integrated with Descope. Please test with sign-up or sign-in use case.

Need help?

Customize

Now that you have the end-to-end application working, you can choose to configure and personalize many different areas of Descope, including your brand, style, custom user authentication journeys, etc. We recommend starting with customizing your user-facing screens, such as signup and login.

Customize

Was this helpful?

Checkpoint

On this page