Terence Eden. He has a beard and is smiling.
Theme Switcher:

Adding OpenStreetMap login to Auth0

· 500 words


So you want to add OSM as an OAuth provider to Auth0? Here's a tip - you do not want to create a custom social connection!

Instead, you need to create an "OpenID Connect" provider. Here's how.

OpenSteetMap

As per the OAuth documentation you will need to:

Once created, you will need to securely save your Client ID and Client Secret.

Auth0

These options change frequently, so use this guide with care.

  • Once you have logged in to your Auth0 Tennant, go to Authentication → Enterprise → OpenID Connect → Create Connection
  • Provide the new connection with the Client ID and Client Secret
  • Set the "scope" to be openid
  • Set the OpenID Connect Discovery URL to be https://www.openstreetmap.org/.well-known/openid-configuration
  • In the "Login Experience" tick the box for "Display connection as a button"
  • Set the favicon to be https://blog.openstreetmap.org/wp-content/uploads/2022/07/osm-favicon.png or other suitable graphic

Next Steps

We're not quite done, sadly.

The details which OSM sends back to Auth0 are limited, so Auth0 is missing a few bits:

 JSON{
    "created_at": "2026-02-29T12:34:56.772Z",
    "identities": [
        {
            "user_id": "openstreetmap-openid|123456",
            "provider": "oidc",
            "connection": "openstreetmap-openid",
            "isSocial": false
        }
    ],
    "name": "",
    "nickname": "",
    "picture": "https://cdn.auth0.com/avatars/default.png",
    "preferred_username": "Terence Eden",
    "updated_at": "2026-02-04T12:01:33.772Z",
    "user_id": "oidc|openstreetmap-openid|123456",
    "last_ip": "12.34.56.78",
    "last_login": "2026-02-29T12:34:56.772Z",
    "logins_count": 1,
    "blocked_for": [],
    "guardian_authenticators": [],
    "passkeys": []
}

Annoyingly, Auth0 doesn't set a name or nickname - so you'll need to manually get the preferred_username, or create a "User Map":

 JSON{
  "mapping_mode": "use_map",
  "attributes": {
    "nickname": "${context.tokenset.preferred_username}",
    "name":     "${context.tokenset.preferred_username}"
  }
}

There's also no avatar image - only the default one.

Getting the Avatar Image

The OSM API has a method for getting user data.

For example, here's all my public data: https://api.openstreetmap.org/api/0.6/user/98672.json - thankfully no authorisation required!

 JSON{
  "user": {
    "id": 98672,
    "display_name": "Terence Eden",
    "img": {
      "href": "https://www.gravatar.com/avatar/52cb49a66755f31abf4df9a6549f0f9c.jpg?s=100&d=https%3A%2F%2Fapi.openstreetmap.org%2Fassets%2Favatar_large-54d681ddaf47c4181b05dbfae378dc0201b393bbad3ff0e68143c3d5f3880ace.png"
    }
  }
}

Alternatively, you can use the Unavatar service to get the image indirectly.

I hope that's helpful to someone!


Share this post on…

What are your reckons?

All comments are moderated and may not be published immediately. Your email address will not be published.

See allowed HTML elements: <a href="" title="">
<abbr title="">
<acronym title="">
<b>
<blockquote cite="">
<br>
<cite>
<code>
<del datetime="">
<em>
<i>
<img src="" alt="" title="" srcset="">
<p>
<pre>
<q cite="">
<s>
<strike>
<strong>

To respond on your own website, write a post which contains a link to this post - then enter the URl of your page here. Learn more about WebMentions.