Singpass Developer Docs
Developer Docs for Singpass
Developer Docs for Singpass
  • INTRODUCTION
    • Overview of Singpass
    • Understanding the basics of OIDC
  • Products
    • Login
      • Introduction
      • Key Principles
      • User Journey
      • Logo Download and Brand Guidelines
      • Singpass Button Guidelines (For developers and designers)
    • FAQ
      • Login
      • Myinfo
    • Myinfo
      • Introduction
      • Key Principles
      • User Journey
      • Logo Download and Brand Guidelines
      • Data Display Guidelines
      • Scheduled Downtimes
  • GETTING STARTED
    • Onboarding Checklist
    • User Journey
    • Create Singpass Application
    • Start Integration - Demo App
  • Technical Specifications
    • Singpass Authentication API
      • Overview of Singpass Flow
      • 1. Authorization Endpoint
        • Redirection on success
        • For Mobile Developers
      • 2. Token Endpoint
        • Authorization Code Grant
        • Client JWK Requirements
      • 3. Userinfo Endpoint
        • Requesting Userinfo
        • Validating the payload
      • .well-known Endpoints
        • OpenID Discovery Endpoint
        • JWKS Endpoint
      • Error Response
      • Frame busting for web views
    • Staging and Production URLs
  • Singpass Developer Portal (SDP)
    • User Guide
      • Obtain Access to SDP
      • Login to SDP
      • Toggle Staging vs Production
      • Create Staging App
      • Edit Staging App
      • Create Staging Test Account
      • Create Production App
      • Edit Production App
      • Consent to Singpass Service Agreement
      • View Singpass Service Agreement
      • Updating Billing Contact Information
      • Deactivate Production App
      • Activate Production App
      • How to View Production App Transactions
      • How to View or Download Your Invoice
    • Understanding the App Config Fields
      • App Name
      • App Description
      • Site URL
      • Support Emails
      • Allowed Scopes
      • Redirect URL
      • Token-based Authentication
  • Data Catalog (Myinfo)
    • Understanding the Data
      • Local Registered Birth Records and Sponsored Child Records
      • CPF Contribution History (up to 15 months)
      • Notice of Assessment (Basic)
      • Notice of Assessment (Detailed)
    • Catalog
      • Personal
      • Finance
      • Education and Employment
      • Family
      • Vehicle and Driving Licence
      • Property
      • Government Scheme
  • TESTING
    • Testing with Singpass App
    • Myinfo Test Personas
  • MORE INFORMATION
    • Contact
Powered by GitBook
On this page
  • Step 1: Clone the Frontend Code of Sample Application
  • Step 2: Navigate to the Project Directory
  • Step 3: Install the Project Dependencies
  • Step 4: Run the React Application
  • Step 6: Clone the Server Side Code of the Sample Application
  • Step 7: Deploy the Sample Application
  • Next steps

Was this helpful?

  1. GETTING STARTED
  2. Custom Integration

Demo Application Setup

Last updated 8 months ago

Was this helpful?

This guide demonstrates how to set up the sample demo Singpass Application built on React framework and Javascript API as server-side code.

To begin the setup, you’ll need to:

Step 1: Clone the Frontend Code of Sample Application

  • In Visual Studio Code, open a new terminal. Clone the Singpass Demo App Frontend repository.

git clone https://github.com/PXNDI/singpass-demo-app.git

Step 2: Navigate to the Project Directory

  • Once the project is created, open the cloned project directory.

Step 3: Install the Project Dependencies

  • Use npm install command to install the project dependencies.

npm install

Step 4: Run the React Application

  • Use npm run start command to run the React application. The application should be loaded up automatically through the web browser http://localhost:3000.com. The demo project calls the token endpoint through an external API hosted on a separate server.

npm run start

Step 6: Clone the Server Side Code of the Sample Application

  • Open a new Visual Studio Code window, then open a new terminal. Clone the Singpass Demo App Sever Side Code repository.

git clone https://github.com/PXNDI/singpassdemoappserver.git

Step 7: Deploy the Sample Application

Next steps

  • Setup the JSON Web Key Store (JWKS)

  • If you already have it, proceed to configure Singpass Application

Deploy both the frontend code and server-side code separately to your desired hosting platform. Refer to this on how to deploy a mobile/web application. The sample server-side code is hosted on Netlify as an API function, hence there is a Netlify folder created as per Netlify's requirement. You may need to refer to the documentation of the different hosting providers when deploying your application.

Node.js and NPM
Visual Studio Code
simple guide