Skip to main content

Vipps login in Auth0 using Social Connections

Introduction​

This guide will describe how to use Auth0's actions to automatically create and login users using Vipps MobilePay. The following implementation will provide the same login process as described in the Vipps Login API documentation.

With Auth0's Social Connections, merchants can implement a Vipps login flow using Vipps as an identity provider.

Prerequisites​

  • Create an Auth0 account

  • Configure an Application:

    • Under Applications, select Create Application and choose your preferred type of application. For this guide, we will select a Single Page Application.
    • Copy the Domain for use in later steps.
    • Under Allowed Callback URLs, specify where a user will be returned after logging in.

  • Create a test unit in the Vipps portal.

    • Save the client_id and client_secret for use in later steps.
    • Set the Token endpoint authentication method to client_secret_post.
    • Add the following redirect URI to the list of callback URIs and replace yourdomainname with the domain name recorded previously.
    https://yourdomainname/login/callback

Configure a Social Connection​

Log in to the Auth0 portal. Under Authentication, select Social and click on Create Social Connection. In the URLs you must change <Vipps environment> to the vipps environment your are using. This could be either api.vipps.no (Prod) or apitest.vipps.no (Test). To set up Vipps login, fill in the following fields:

  • Name: Name of your connection, for example, "VippsLogin".

  • Authorization URL: https://<Vipps environment>/access-management-1.0/access/oauth2/auth>

  • Token URL: <https://<Vipps environment>/access-management-1.0/access/oauth2/token>

  • Scope: The scope defines the information you are requesting from the users. The openid scope must be specified, but additional scope parameters can be provided by Vipps. The scope parameters will be used to decide which user attributes are used to create an Auth0 user.

    If multiple scopes are provided, separate them with spaces and select Separate scopes using a space. For example, enter openid name phoneNumber email, request name, phone number, and the email of the user.

  • Client ID Enter your client_id recorded earlier.

  • Client Secret Enter your client_secret recorded earlier.

  • Fetch User profile script: Here you can enter JavaScript code to fetch data from the Vipps API and store it to an Auth0 user. See Fetch user profile script below for an example of how it can be implemented.

Fetch user profile script​

An example script is provided below. You must change <Vipps environment> to the Vipps environment your are using. This could be either api.vipps.no (Prod) or apitest.vipps.no (Test).

function fetchUserProfile(accessToken, context, callback) {
  request.get(
    {
      url: "https://<Vipps environment>/vipps-userinfo-api/userinfo",
      headers: {
        Authorization: "Bearer " + accessToken,
      },
    },
    (err, resp, body) => {
      if (err) {
        return callback(err);
      }
      if (resp.statusCode !== 200) {
        return callback(new Error(body));
      }
      let bodyParsed;
      try {
        bodyParsed = JSON.parse(body);
      } catch (jsonError) {
        return callback(new Error(body));
      }
      const profile = {
        user_id: bodyParsed.sub,
        email: bodyParsed.email,
        phone_number: "+" + bodyParsed.phone_number,
        name: bodyParsed.name,
      };
      callback(null, profile);
    }
  );
}

In the body of profile you can specify the scope, what data will be provided by the user. The scopes provided by Vipps can be found here. You can also specify what it will be mapped to in Auth0 as well as how it should be formatted.

Values

  • url - This is the URL to the endpoint used for getting user information from the Vipps Userinfo API.
  • headers - The user info API uses Bearer Token Authentication. For more information, see the Vipps Userinfo API.
  • profile - Which attributes will be collected and how they will be used to create an Auth0 user. The user_id parameter is used to create a unique identifier for the signed-up user. This should be created from the sub which is a unique identifier corresponding to a Vipps user. For more information about Vipps's unique identifier see What is the sub?

Add a Social Connection to your Application​

Under Applications, click on Connections. Make sure that your new Social Connection is toggled.

Test your connection​

Under Authentication -> Social, select your newly created Social Connection. Click Try Connection. You should be redirected to the Vipps login page.

To check if a user has been created correctly, go to User Management -> Users. There should be a new user in the Auth0 database. To check if the attributes have been collected, click on the user and select Raw JSON. It should look something like this:

{
  "created_at": "2023-07-04T08:16:58.209Z",
  "email": "ola.nordmann@vipps.no",
  "identities": [
    {
      "provider": "oauth2",
      "user_id": "VippsLogin|{sub}",
      "connection": "VippsLogin",
      "isSocial": true
    }
  ],
  "name": "Ola Nordmann",
  "nickname": "ola.nordmann",
  "phone_number": "+4712345678",
  "picture": "https://s.gravatar.com/avatar/{...}.png",
  "updated_at": "2023-07-04T10:57:43.939Z",
  "user_id": "oauth2|VippsLogin|{sub}",
  "last_ip": "77.40.174.194",
  "last_login": "2023-07-04T10:57:43.939Z",
  "logins_count": 2,
  "blocked_for": [],
  "guardian_authenticators": []
}

References​

Create a custom Social Connection with Vipps as an identity provider.

Terminology