Integrating Singpass Login API with Laravel Socialite Provider — The Last Part — Frontend Integration

Pre-requisite

Before proceeding the frontend integration with Singpass Login API make sure you have match this criteria

✅ Your frontend domain is whitelisted, even the proxy domain for development environment. If not, you will unable to load the Singpass Login QR Code.

✅ Have your callback URL whitelisted on SingPass Server.

✅ JWKS Endpoint is prepared

Extra API preparation

Auth Params API for Singpass Login
You need to prepare this API, this API will response the state and nonce that will be sent to Singpass Login API, and will be used to prevent any replay attacks, to do this you need to verify the state that is stored before in your session.

If you are using socialite on SPA or API you might need to use a stateless way to authenticate user via socialite this is due to there is no session thingy in RestFul API, to authenticate the user you might want to send a JWT or OAuth access token and redirect them to frontend with the access token attached.

To do this we can create single action controller, and the implementation will be as below:

Based on the code above, which we generate a nonce (basically a random value) and a state (which is basically a session token we use to validate the transaction on any non-stateless socialite auth).

In addition, the parameters to response contains the client_id and the redirect_uri (callback url) from the backend configuration that will redirected to once the QR code is loaded success, and the auth code that used to exchange access token will be attach in callback url as query parameters

And don’t forget to register in your routes file (api.php)

Once the Singpass Login QR parameters API is ready, we can head over to the frontend implementation.

Due to Singpass Login QR JS is written in vanilla Javascript (Pure JS), so let’s make it become a VueJS components, to achieve this I will use VueJS , as well as axios to fetch the QR params from the API and TailwindCSS for utility based styling. Since this is a demo, I will load all this frontend assets from CDN.

So let’s prepare our layout file

On Line 20–21 , we make the NDI (Singpass Login QR JS) and axios object become part of the Vue prototype so we can use it inside any Vue component.

For the login page here is what is the blade file looks like

Based on the implementation above, we load the required auth parameters from the singpass-qr-params API that we have created earlier, then created a new SingPass Login QR object by calling the initAuthSession, the initAuthSession contains 4 type of parameters those parameters description is available at NDI — ndi_embedded_auth.js Reference (singpass.gov.sg). And don’t forget to call the cancelAuthSession in the beforeDestroy component life cycle hooks.

Backend Setup
Register callback url endpoint, and load the SingpassLoginProvider in ServiceProvider.

As previous part we have created the Singpass Login Socialite Provider, now we need to activate this provider by register it into the AppServiceProvider. To do that paste the following code into your AppServiceProvider inside the app/Providers directory.

Next, we need to prepare our callback url endpoint, this is where the Singpass QR Login JS will redirected to, if the authentication result is success, the auth code and state token will be attach as code and statein callback url query parameter, this the step that those token exchange flow get started.

Session Based

In web.php add a new route as below, this is known as non-stateless authentication, and socialite will perform a check against the state that it save it earlier

Stateless (API based Authentication)

This is recommended when you using socialite provider in your API since there is no session in API

And thats all about it, once the login is success you will be redirected to the callback page, and you will receive the Singpass User NRIC, and UUID in socialite user object properties.

To get more info about the Singpass user please consider the MyInfo API.

And that’s all about integrating Singpass Login API with Laravel Socialite,
Thanks for reading ~