Add LinkedIn Login

​

Prerequisites

1. You need a Hanko Cloud account and a project. Learn more on how to set them up here.
2. You need a LinkedIn account. You can create an account here.

​

Get your provider redirect URL

When creating an LinkedIn application, you need to provide a redirect URL that determines where the third party provider redirects after a successful login. This redirect URL consists of the base URL of the Hanko API and the /thirdparty/callback endpoint. You can always view your redirect URL in the Hanko Cloud Console:

1. Sign in to cloud.hanko.io.
2. Select your Organization.
3. Select your Project.
4. In the left sidebar, click Settings, then select Identity providers.
5. Find your redirect URL in the Redirect URL input.

You need the redirect URL for creating a new LinkedIn application in the next step and configuring your credentials with Hanko (you will also configure the remaining configuration options visible in the above screen in this step).

​

Create a new LinkedIn application

1. Navigate to and log in to the LinkedIn developer portal.

2. Click on the Create app button.

3. Enter your application name in App name.
4. Enter your LinkedIn company page url in LinkedIn Page or create one.
5. (Optional) Enter your privacy policy page url in Privacy policy URL.
6. Upload a logo for your application.
7. Accept the terms and conditions.
8. Click on the Create app button.

9. Search for the Sign In with LinkedIn using OpenID Connect card from the product list.
10. Click Request access.

11. Accept the terms and conditions.
12. Click on the Request access Button.
13. The card should now show as added product.
14. Click on Auth and scroll to OAuth 2.0 settings

15. Click on the pencil next to Authorized redirect URLs for your app
16. Click on + Add redirect URL
17. Enter the Redirect URL you obtained in the first step as the value.
18. Click on the Update button.

​

Get your client ID and secret

You can view the client ID as well as the secret of your app in the Auth tab on your app page. You will need this when configuring your credentials with Hanko

​

Configure credentials with Hanko

1. In the Hanko Cloud Console, navigate to your project Settings and select Identity providers.
2. Configure the following:

• Error Redirect URL: This is the URL target in your frontend the Hanko API redirects to if an error occurs during third party sign-in. If your frontend uses the hanko-elements web components, this URL should be the URL of the page that embeds the web component such that errors can be processed properly by the web component.

• Allowed Redirect URL: This is the URL target in your frontend the Hanko API is allowed to redirect to after third party authentication was successful. If your frontend uses the hanko-elements web components, this URL should be the URL of the page that embeds the web component.

  The allowed redirect URL supports wildcard matching through globbing:

  • https://*.example.com matches https://foo.example.com and https://bar.example.com.
  • https://foo.example.com/* matches URLs like https://foo.example.com/page1 and https://foo.example.com/page2.
  • Use ** to act as a super-wildcard/match-all.

2. In the Providers section, select LinkedIn and use the Enable provider toggle to enable the provider.
3. Provide the Client ID and Client Secret you obtained in one of the previous section in the remaining inputs.
4. Click Save.

​

Frontend integration

To enable a login with LinkedIn in your frontend application we recommend using either our pre-built UI as provided by the @teamhanko/hanko-elements package or building a custom UI using the @teamhanko/hanko-frontend-sdk.

• Hanko Elements
• Hanko Frontend SDK