> **Description:** Learn how to integrate Vipps MobilePay login into your Auth0 application using Social Connections.

# Auth0 using Social Connections

With Auth0's Social Connections, you can implement a login flow that uses Vipps MobilePay as the identity provider.

## Plugin extension

Please see the [*Vipps MobilePay Login* plugin extension](https://developer.vippsmobilepay.com/docs/plugins/extensions/auth0-login.md).

## Implementation guide

If you need to do the implementation yourself, the guide below might be helpful.
Keep in mind that it's an unofficial solution, intended only for inspiration.

The guide explains how to use Auth0's actions to automatically create and log in users using Vipps MobilePay. This implementation aligns with the
[Login from mobile](https://developer.vippsmobilepay.com/docs/APIs/login-api/how-it-works/login-from-mobile.md) flow.

### Prerequisites

* [Create an Auth0 account](https://auth0.com/signup)
* 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 portal](https://developer.vippsmobilepay.com/docs/knowledge-base/portal.md#how-to-add-a-new-sales-unit).

  * 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.

  ```bash
  https://yourdomainname/login/callback
  ```

### Configure a Social Connection

Log in to the Auth0 portal. Under *Authentication*, select *Social*, click on *Create Social Connection* and then select "Create Custom". In the URLs you must change `<Vipps environment>` to the environment you are using. This could be either `api.vipps.no` (Prod) or `apitest.vipps.no` (Test). To set up 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](https://developer.vippsmobilepay.com/docs/APIs/login-api/api-guide/user-info.md#scopes) parameters can be provided.
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`.

* **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 API and store it to an Auth0 user. See [Fetch user profile script](#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 environment you're using. This could be either `api.vipps.no` (Prod) or `apitest.vipps.no` (Test).

```javascript
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](https://developer.vippsmobilepay.com/docs/APIs/login-api/api-guide/user-info.md#scopes) to define what data will be required of the user. 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 [Userinfo API](https://developer.vippsmobilepay.com/docs/APIs/userinfo-api/README.md).
* `headers` - The user info API uses Bearer Token Authentication. For more information, see the [Userinfo API](https://developer.vippsmobilepay.com/docs/APIs/userinfo-api/README.md).
* `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 or MobilePay user. For more information about the unique identifier, see [Login: sub](https://developer.vippsmobilepay.com/docs/APIs/login-api/api-guide/user-info.md#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* > *Social Connection*. Click *Try Connection*. You should be redirected to the 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:

```json
{
  "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": []
}
```

### Further information

* [Connect Apps to Generic OAuth2 Authorization Servers](https://auth0.com/docs/authenticate/identity-providers/social-identity-providers/oauth2)

> **Full site overview:** For every page in this documentation, read [https://developer.vippsmobilepay.com/llms.txt](https://developer.vippsmobilepay.com/llms.txt).