# Authentication via Pop-up window (Platform API Client SDK for Javascript)
In a recent release notes, the following deprecation was announced: "Genesys Cloud Login web app can no longer be embedded in an iframe".
```
On the effective date, Genesys Cloud will deprecate the ability to embed the Genesys Cloud login web application within an iframe. This deprecation helps to protect Genesys Cloud from social engineering or phishing attacks, which could result in a user being tricked into entering their login credentials on a malicious webpage.
This deprecation will occur in two phases:
Starting August 31, 2026, new integrations will no longer be able to embed the login web application in an iframe. Existing integrations that currently use the iframe-based authentication will be recorded and added to the exception list and they will continue to work during the transition period.
```
Helpers and logic have been added to the Platform API Client SDK for Javascript (and Typescript) to facilitate a user authentication process through a pop-up window.
This is effective starting with the current version of the Platform API Client SDK for Javascript - version 258.2.0
- https://sdk-cdn.mypurecloud.com/javascript/258.2.0/purecloud-platform-client-v2.min.js
- https://sdk-cdn.mypurecloud.com/javascript/258.2.0/purecloud-platform-client-v2.js
- https://www.npmjs.com/package/purecloud-platform-client-v2
You can enable Popup Authentication with one of the two methods described in the following code.
```javascript
const client = {{moduleName}}.ApiClient.instance;
client.setEnvironment({{moduleName}}.PureCloudRegionHosts.eu_west_1);
// If Access Token persistence is wanted, uncomment next line
// client.setPersistSettings(true, 'a_prefix_for_your_web_app');
// OAuth ClientID
const clientId = 'YOUR_OAUTH_CLIENT_ID';
// OAuth Redirect URL
// Before: const redirectUri = 'https://my_web_app_host/web_app.html';
const redirectUri = 'https://my_pop_up_host/auth_popup.html';
// Method1 - Update ApiClient's AuthPopupConfiguration
client.updateAuthPopupConfiguration({ usePopup: true, popupTimeout: 60000 })
// Method2 - Pass AuthPopupConfiguration as part of the loginPKCEGrant optional parameter authPopupConfiguration
client.loginPKCEGrant(clientId, redirectUri, { state: state, authPopupConfiguration: { usePopup: true, popupTimeout: 60000 } })
.then((data) => {
// The loginPKCEGrant promise is resolved when the popup authentication is completed (user authenticated)
console.log(data);
// Do authenticated things
})
.catch((err) => {
// Handle failure response
console.log(err);
});
```
The redirectUri, used in loginImplicitGrant or loginPKCEGrant methods, corresponds to the url that you want your pop-up window to be redirected to, at the end of the Authentication process. e.g. `https://my_pop_up_host/auth_popup.html`
This uri MUST be added to the Authorized redirect URIs defined in your OAuth Client.
If you are triggering an OAuth PKCE Grant flow using the loginPKCEGrant method, and if the web app that invokes the loginPKCEGrant method is on a different host than the pop-up page, you MUST also add the uri of the web app to the Authorized redirect URIs defined in your OAuth Client. e.g. 'https://my_web_app_host/web_app.html'
You can also leverage the popup progress status handler, to update your UI according to the stage of the Popup Authentication process as shown in the sample code here.
```javascript
const client = platformClient.ApiClient.instance;
client.setEnvironment(platformClient.PureCloudRegionHosts.eu_west_1);
// If Access Token persistence is wanted, uncomment next line
// client.setPersistSettings(true, 'a_prefix_for_your_web_app');
// OAuth ClientID
const clientId = 'YOUR_OAUTH_CLIENT_ID';
// OAuth Redirect URL
// Before: const redirectUri = 'https://my_web_app_host/web_app.html';
const redirectUri = 'https://my_pop_up_host/auth_popup.html';
// Update ApiClient's AuthPopupConfiguration
client.updateAuthPopupConfiguration({ usePopup: true, popupTimeout: 60000 })
// Set AuthPopupStatus handler
// Update UI based on status
client.onAuthPopupStatus = (status, msg, identifier) => {
console.log(`AUTH POPUP STATUS RECEIVED: status=${status}, msg=${msg}, identifier=${identifier}`);
// status == "INIT": Authentication Popup in progress -> sets UI
// status == "ERROR" | "AUTH_ERROR" | "TIMEOUT" : Authentication Error -> sets UI
// status == "AUTHENTICATED" : Authentication Success -> sets UI
// status == "ABORTED" : Authentication Aborted -> sets UI
// status == "REDIRECTING" : About to replace location url -> sets UI
}
client.loginPKCEGrant(clientId, redirectUri, { state: state })
.then((data) => {
// The loginPKCEGrant promise is resolved when the popup authentication is completed (user authenticated)
console.log(data);
// Do authenticated things
})
.catch((err) => {
// Handle failure response
console.log(err);
});
```
#PlatformAPI
#PlatformSDK
------------------------------
Jerome Saint-Marc
Senior Development Support Engineer
------------------------------