Invoke Authorization Endpoint

This section demonstrates how to invoke the authorization endpoint for Singpass to begin the authentication process. First, you will need to create a Singapss Login button to trigger the redirection. Once the user has been authenticated, your application will be redirected to the redirect URL that has been set up in the Application configuration with the authorization code.

Authorization endpoint for different environments:

Staging	Production
https://stg-id.singpass.gov.sg/auth	https://id.singpass.gov.sg/auth

Step 1: Create Login Button

• Create a new file in your application for the login button. For the demo singpass application, app.js contains the Login button code. You may also copy the logic needed to create a simple login button from the code panel below.

// App.js
<button type="submit"onClick={() => (window.location.href = url)}>
Login with Singpass </button>

Step 2: Update request parameters

• Update request parameters accordingly for the authorization endpoint with the following attributes:

	Key	Description
	scope	Supported value is openid.
	response_type	The authorization processing flow to be used. Supported value is code for the Authorization Code Flow.
	client_id	This should be client_id of the registered client provided in the Application configuration for each Application
	redirect_uri	The URL that Singpass will eventually redirect the user to after the user completes the login process using the Singpass Application. The value will be validated against the list of redirect URIs that were pre-configured in Application Configuration.
	nonce	A session-based, unique, and non-guessable value that the RP should generate per auth session. This parameter should ideally be generated and set by the RP’s backend and passed to the frontend. As part of threat modelling, Singpass is requesting for the nonce parameter so as to mitigate MITM replay attacks against the ASP Service’s Token Endpoint and its resulting ID Token. This parameter serves the same purpose as OIDC 1.0’s nonce parameter.
	state	A session-based, unique, and non-guessable value that the RP should generate per auth session. This parameter should ideally be generated and set by the RP’s backend and passed to the frontend. As part of threat modelling, NDI is requesting for the state parameter so as to mitigate replay attacks against the RP’s redirection endpoint (redirectUri). This parameter serves the same purpose as OAuth 2.0’s state parameter. Maximum of 255 characters. Must match regexp pattern of [A-Za-z0-9/+_\-=.]+

Create attributes for all the request parameters and update them accordingly. This URL will be triggered once the user triggers the login button. For the demo singpass application, update all the following fields within the app.js file.

  const authurl = "https://stg-id.singpass.gov.sg/auth?"; 
  //This is the staging auth endpoint
  const scope = "openid"; //Defaulted to openid
  const response_type = "code"; //Defaulted to code
  const client_id = "tLRDBkf1CNy5Rsi34mEKuOD5EpQAwjIq"; 
  //Update to the ClientID obtain from Singpass Developer Portal 
  const redirect_uri = "https://singpassdemoapp.netlify.app/callback"; 
  //Update to the Redirect/Callback URL indicated in Singpass Developer Portal 
  const nonce = crypto.randomUUID();
  const state = crypto.randomUUID();
  const url =
    authurl +
    "scope=" +
    scope +
    "&state=" +
    state +
    "&response_type=" +
    response_type +
    "&redirect_uri=" +
    redirect_uri +
    "&client_id=" +
    client_id +
    "&nonce=" +
    nonce

Step 3: Run the Application and Test

• Run the application and click on the login button. You should be redirected to the Singpass staging login page. The authentication type will be based on the configuration of the Application.

For QR Authentication

There will only be a QR displayed, use the Staging Singpass Mobile App to scan the QR and approve to get authenticated.

For 1FA Authentication

• Select Singpass App or Password Login. If the Singpass App is selected, the process flow is the same as QR Authenticated.

• For Password Login, use the Staging Login Credentials requested via Test Account Request Portal. Alternatively, you can use the following Singpass ID and Password to test the login.

For 2FA Authentication

• Scan the QR via the Staging Singpass Mobile App and approve to get authenticated or select Password Login using the Staging Login Credentials requested via Test Account Request Portal.

• For Login via Password Login, you will be required to provide an SMS OTP. This OTP will be sent to the mobile number you register when requesting a Test Account via the Test Account Request Portal.

• Once the user has authenticated via any of the 3 authentication methods, verify that Singpass redirects you to your application registered redirect_uri along with the code and state parameters like the following example.

If you have received the code and state successfully, your application is ready for the next steps.

Singpass generally follows OIDC error response specifications. For more information, please refer to Authorization Error Response specifications.

Next steps

• Setup the Client Assertion and build the Client Assertion function
• If you already have it, proceed to set up your Application Server to call Singpass's Token Endpoint.