---
title: Step 2. Authenticating with external IdPs
description: PingOne Advanced Identity Cloud PingAM JavaScript
component: orchsdks
page_id: orchsdks:journey:use-cases/external-idp/javascript/02_authenticate_with_external_idps
canonical_url: https://developer.pingidentity.com/orchsdks/journey/use-cases/external-idp/javascript/02_authenticate_with_external_idps.html
revdate: Tue, 25 Mar 2025 11:00:37 +0100
keywords: ["DaVinci", "Flows", "Tutorial", "Source Code", "Integration", "SDK", "Android"]
section_ids:
  journey: Handling external IdP nodes in Advanced Identity Cloud or PingAM journeys
---

# Step 2. Authenticating with external IdPs

[icon: circle-check, set=far]PingOne Advanced Identity Cloud [icon: circle-check, set=far]PingAM [icon: js, set=fab]JavaScript

Your app must handle the relevant node types your server returns when a user attempts to authenticate using an external IdP.

Initially, the client receives a list of the external IdPs a user can select for authentication, in a `SelectIdPCallback`.

After returning the selected external IdP to the server, it responds with a `RedirectCallback` with the selected external IdP's authentication endpoints.

Your client then redirects the user to the external IdP to authenticate, which then redirects them back afterwards.

## Handling external IdP nodes in Advanced Identity Cloud or PingAM journeys

When encountering a `SelectIdPCallback` callback in a journey, use the `getProviders()` method to display the available providers, and `setProvider()` when the user makes a choice:

Getting a list of providers, and setting the chosen one

```typescript
// Handling 'SelectIdPCallback'
const callback = step.getCallbackOfType('SelectIdPCallback')

// Get a list of the external IdPs
const providers = callback.getProviders();

// Display providers
// User makes choice

// Set provider on the callback
callback.setProvider(chosenProvider);

// Submit the current step and get the next one
step = await journeyClient.next(step);
```

The next callback is the `RedirectCallback`. Detect the presence of the callback, and pass the step as a parameter to the `redirect` method:

Handling redirect callbacks to authenticate at the external IdP

```typescript
if (step.getCallbacksOfType(callbackType.RedirectCallback).length) {
  redirect(step);
}
```

This triggers a full browser redirect to the IdP. When the user authenticates with the IdP, they are redirected back to the app. When your application handles this redirect, check for the query parameters `code` and `state` for Facebook and Google, or `form_post_entry` for Apple.

If they're present, call the `resume()` method:

Resuming an existing journey

```typescript
// Get the code and state from the URL query parameters
const codeParam = params.get('code');
const stateParam = params.get('state');

let resumeUrl = '';

if (codeParam && stateParam) {
  resumeUrl = window.location.href;
}

// If we were redirected here from an IDP with 'code' and 'state' params, resume the flow
if (resumeUrl) {
  const resumeStep = await client?.resume(resumeUrl);
} else {
  const initialStep = await client?.start();
}
```

The `resume()` method gathers information from the previous step saved to browser storage before the redirect to resume the authentication journey.