> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hanko.io/llms.txt
> Use this file to discover all available pages before exploring further.
# Sign in with LinkedIn
> Step-by-step guide to integrating Sign in with LinkedIn using Hanko. Enable secure authentication and seamless onboarding for your app's users.
**Hanko LinkedIn OAuth Integration Guide**:
**About Hanko**:
Hanko is a modern open source authentication solution and the fastest way you integrate passkeys, 2FA, SSO, and more—with full control over your data. Move between self-hosted and Hanko Cloud anytime. No lock-in. Just Auth how it should be: secure, user friendly, and fully yours.
**What This Guide Covers**: This guide demonstrates how to integrate LinkedIn OAuth authentication with Hanko, enabling users to sign in using their LinkedIn professional accounts. You'll learn to create a LinkedIn application, configure Sign In with LinkedIn using OpenID Connect, and implement LinkedIn authentication in your application.
**Key Technologies**:
* OAuth 2.0 and OpenID Connect protocols
* LinkedIn Sign In with OpenID Connect
* JWT (JSON Web Tokens) for secure session management
* LinkedIn Developer Portal and API
* RESTful API integration
**Prerequisites**:
* Active Hanko Cloud account with a configured project
* LinkedIn account for developer portal access
* Basic understanding of OAuth 2.0 authentication flow
* LinkedIn company page (required for app creation)
**Tasks You'll Complete**:
* Create and configure a LinkedIn application with Sign In capabilities
* Request access to Sign In with LinkedIn using OpenID Connect
* Configure OAuth redirect URLs and obtain client credentials
* Configure LinkedIn OAuth credentials in Hanko Console
* Implement LinkedIn authentication in your frontend application
## Prerequisites
1. You need a Hanko Cloud account and a project. Learn more on how to set them up [here](https://docs.hanko.io/setup-hanko-cloud).
2. You need a LinkedIn account. You can create an account [here](https://www.linkedin.com/signup).
## 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`](http://docs.hanko.io/api/public#tag/Third-Party/operation/thirdPartyCallback) endpoint. You can always view your redirect URL in the Hanko Cloud Console:
1. Sign in to [cloud.hanko.io](https://cloud.hanko.io).
2. Select your `Organization`.
3. Select your `Project`.
4. In the left sidebar, click `Settings`, then select `Social connections`.
5. Find your redirect URL in the `Redirect URL` input.
You need the redirect URL for [creating a new LinkedIn application](#create-a-new-linkedin-application) in the next step and
[configuring your credentials with Hanko](#configure-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](https://www.linkedin.com/developers/login).
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 the `Auth` tab up top 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](#get-your-provider-redirect-url) 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)
## Configure credentials with Hanko
1. In the Hanko Cloud Console, navigate to your project `Settings` and select `Social connections`.
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](#frontend-integration), 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](#frontend-integration), 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](#get-your-client-id-and-secret)
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`](https://www.npmjs.com/package/@teamhanko/hanko-elements) package or building a custom UI using
the [`@teamhanko/hanko-frontend-sdk`](https://www.npmjs.com/package/@teamhanko/hanko-frontend-sdk).
We recommend following one of our [quickstart guides](https://docs.hanko.io/quickstarts) to integrate
the `` component from our `@teamhanko/hanko-elements` package in your frontend application .
On successful integration, the component will display a button for signing in with `LinkedIn` in the login view
of the component.
Make sure to configure the page the web component is embedded on as your `error redirect URL` as well as an
`allowed redirect URL` (see the [previous step](#configure-credentials-with-hanko)).
On successful authentication with the provider, the backend issues a session cookie and the web component
continues the usual component flow on success. Errors that occur during third party
provider authentication are also picked up and displayed in the web component accordingly.
When building your own UI, you can use the `@teamhanko/hanko-frontend-sdk` to initialize third party sign in.
Create a [`Hanko` client](https://teamhanko.github.io/hanko/jsdoc/hanko-frontend-sdk/Client.html) instance and call the
`thirdParty.auth` method with `linkedin` as your provider and the target URL in your app you want to redirect
to after authentication.
```js theme={null}
import { Hanko } from "@teamhanko/hanko-frontend-sdk";
// you can find the Hanko API URL on the dashboard of your project
// in the Hanko Cloud Console
const hanko = new Hanko("");
async function signInWithLinkedIn() {
try {
// the redirect url argument must be one of the allowed redirect URLs
// configured in the previous step.
await hanko.thirdParty.auth("linkedin", "");
} catch (error) {
// handle error
}
}
```
On successful authentication, the API redirects you to the given redirect URL. The URL query includes a one time
token that must be exchanged for a JWT. Use the `token.validate` method on your client to validate the token:
```js theme={null}
import { Hanko } from "@teamhanko/hanko-frontend-sdk";
const hanko = new Hanko("");
async function onLoad() {
try {
await hanko.token.validate();
} catch (error) {
// handle error
}
// you should now have a JWT cookie set
}
```
On success, the API issues a JWT which is then set by the SDK as a cookie (hanko). All other SDK methods
can now use the cookie to make authenticated requests to the API.