Legacy Dev Forum Posts

 View Only

Sign Up

loginPKCEGrant, Browser auth - verify inputs

  • 1.  loginPKCEGrant, Browser auth - verify inputs

    Posted 06-05-2025 18:04

    Daniel_Lewis | 2024-09-19 19:49:57 UTC | #1

    I'm using the following code to try and connect to the API, but I'm getting this error response: Uncaught Reference Error: state is not defined

    function ConnectToApi() {

    const client = platformClient.ApiClient.instance; const redirectUri = "https://apps.mypurecloud.com/api/v2/conversations/callbacks";

    // Method1: Let loginPKCEGrant generate the code verifier

    client.loginPKCEGrant(clientId, redirectUri, { state: state }) .then((data) => { console.log(data); // Do authenticated things }) .catch((err) => { // Handle failure response console.log(err); }); }

    I couldn't find info on the redirectUri, so I figured it was what I used, but since the state isn't being overwritten, I assume that means that my Uri is wrong. Please let me know.


    tim.smith | 2024-09-19 19:56:42 UTC | #2

    Daniel_Lewis, post:1, topic:29433
    Uncaught Reference Error: state is not defined

    It's probably referring to this:

    Daniel_Lewis, post:1, topic:29433
    client.loginPKCEGrant(clientId, redirectUri, { state: state })

    You have to provide your own value for state, or don't provide that option at all if your app doesn't need to use the state. Examples:

    // Example using the current URI fragment for a SPA that uses fragment-based navigation
    client.loginPKCEGrant(clientId, redirectUri, { state: window.location.hash })
    
    // Example not using state
    client.loginPKCEGrant(clientId, redirectUri)

    Daniel_Lewis | 2024-09-19 19:58:01 UTC | #3

    Oh, ok then. So my Uri is valid, my understanding is correct?

    Can we update the loginPKCE info to not that state is optional?


    tim.smith | 2024-09-19 19:59:22 UTC | #4

    Daniel_Lewis, post:1, topic:29433
    const redirectUri = "https://apps.mypurecloud.com/api/v2/conversations/callbacks";

    This is not an appropriate redirect URI. Nor is it an appropriate API endpoint. The redirect URI should be your app. When making an API request later on, you need to use one of the API servers: https://developer.genesys.cloud/platform/api/.


    Daniel_Lewis | 2024-09-19 21:20:08 UTC | #5

    So like this?

    If so, I'm getting this error and I know my client ID is correct.


    tim.smith | 2024-09-19 20:15:24 UTC | #6

    No, that's the URI for the Genesys Cloud web UI. The redirect URI should be the URI of your application. That might be a localhost address if you're developing locally otherwise would be something on the hostname of the server that's hosting your page/application.


    tim.smith | 2024-09-19 20:16:50 UTC | #7

    Also, you'll get that error unless the redirect URI you send is exactly the one you configured on the oauth client. https://help.mypurecloud.com/articles/create-an-oauth-client/


    Daniel_Lewis | 2024-09-19 20:25:06 UTC | #8

    Thanks Tim,

    For my redirect, I tried with both the local 127 and my external facing IP and both are in my OAuth settings


    Daniel_Lewis | 2024-09-19 20:33:50 UTC | #9

    I'm developing locally on a non-hosted web file, an htm and js combo in a folder on my machine, so it makes sense for there to be a problem if I try to redirect to the local address, and my external IP doesn't provide routing.

    Does there have to be a redirect? I'd rather just be able to execute without having to redirect.


    tim.smith | 2024-09-19 20:34:41 UTC | #10

    If you're still getting that error, it's one of those two things. Either the client ID has a typo or the redirect URI you're sending is not an exact match for what's configured on the oauth client.


    tim.smith | 2024-09-19 20:40:38 UTC | #11

    Daniel_Lewis, post:9, topic:29433
    I'm developing locally on a non-hosted web file, an htm and js combo in a folder on my machine, so it makes sense for there to be a problem if I try to redirect to the local address, and my external IP doesn't provide routing.

    When developing locally, the page doesn't have to be available externally; you're the only one viewing it.

    Daniel_Lewis, post:9, topic:29433
    Does there have to be a redirect? I'd rather just be able to execute without having to redirect.

    Yes. This behavior is defined by the OAuth 2.0 specification.


    Daniel_Lewis | 2024-09-19 21:22:42 UTC | #12

    Thanks for verifying.

    Do you know of any solutions for local development where the redirect is needed, but there is no 1 to 1 url to redirect to?

    Is the redirect just here to match against urls defined by the admin client?


    tim.smith | 2024-09-20 13:37:44 UTC | #13

    Daniel_Lewis, post:12, topic:29433
    but there is no 1 to 1 url to redirect to?

    I'm not sure what you mean. You said you're working on a HTML file, so it will have an absolute URI as served by your locally running web server. It would be something like http://localhost:8080/path/to/file.html.

    Daniel_Lewis, post:12, topic:29433
    Is the redirect just here to match against urls defined by the admin client?

    No, it's part of the OAuth flow. See the links I posted previously or the OAuth RFC directly for documentation on that flow.


    Daniel_Lewis | 2024-09-20 21:09:54 UTC | #14

    Hi Tim,

    Thanks for your help on this. I realized that my understanding on this must be frustrating when paired with my relentless pursuit. I appreciate your assistance.

    I've made a few changes and a little progress.

    Here is my code using the JS SDK:

    const redirectUri = "http://api.localhost";

    ConnectToApi();

    function ConnectToApi() {

    const client = platformClient.ApiClient.instance; // Method1: Let loginPKCEGrant generate the code verifier client.loginPKCEGrant(clientId, redirectUri) .then((data) => { console.log("API Connected!",data); // Do authenticated things }) .catch((err) => { // Handle failure response console.log("Failed. ",err); }); }

    function UserAPI() {

    const client = platformClient.ApiClient.instance; // Create API instance const usersApi = new platformClient.UsersApi(); // Authenticate client.loginImplicitGrant(clientId, redirectUri) .then(() => { // Make request to GET /api/v2/users/me?expand=presence return usersApi.getUsersMe({ 'expand': ["presence"] }); }) .then((userMe) => { // Handle successful result console.log(Hello, ${userMe.name}!); }) .catch((err) => { // Handle failure response console.log(err); }); }

    Here is my output:

    Please help me figure this out.


    tim.smith | 2024-09-23 14:05:17 UTC | #15

    The error unauthorized client means your org does not currently allow logins from that oauth client. You can read more about this here: https://help.mypurecloud.com/articles/authorize-an-oauth-client-2/.


    Daniel_Lewis | 2024-09-23 16:21:09 UTC | #16

    Hi Tim,

    I approved the APP that's tied to the clientID from my OAuth, , but the error persists


    tim.smith | 2024-09-23 16:26:25 UTC | #17

    That error means that the client you're using in the OAuth redirect is not authorized in the org you're trying to authenticate with. If you've double checked that info and are absolutely sure you haven't made any mistakes, please open a case with Genesys Cloud Care to investigate.


    Daniel_Lewis | 2024-09-24 22:10:30 UTC | #18

    I was able to get connected, the original issue is resolved, however in testing a callback creation I ran into this issue:

    The first time I call the API nothing happens.

    The second time 1 call is completed, adding a callback to the queue.

    The third time, two callbacks are added.

    Here is the code I'm using:

    function ConnectToApi(pn) {

    const client = platformClient.ApiClient.instance; const conversationsApi = new platformClient.ConversationsApi(); client.setEnvironment("mypurecloud.com"); client.loginImplicitGrant(clientId, redirectUri) .then((data) => { //client.setAccessToken = data["accessToken"]; //Not sure what to do with token console.log("API Connected!"); // Do authenticated things const callbackData = { routingData: { queueId: test_queue }, scriptId: '', callbackUserName: 'Test Callee', callbackNumbers: [ pn ], data:{ notes: 'Test Notes' }, callerId: '+16266666666', callerIdName: 'Tester' }; // Create callback return (conversationsApi.postConversationsCallbacks(callbackData) ); }) .catch((err) => { // Handle failure response console.log("Failed. ",err); }); }

    Please let me know if you can spot what's wrong.


    tim.smith | 2024-09-25 13:59:57 UTC | #19

    When your app does't have a valid auth token, the call to loginImplicitGrant will result in redirecting the user to the auth server to authenticate. Once authentication is complete, it will redirect back to your app's redirect URI.

    The multiple traces of "API Connected!" are presumably because you're calling that function multiple times.


    Daniel_Lewis | 2024-09-26 20:45:08 UTC | #20

    Hi Tim,

    Thanks for your help on this and though your responses grew terser over time, the information you were able to provide at the beginning helped my look in the right direction.

    I'm now able to host a local page where I can trigger api calls.


    tim.smith | 2024-09-27 13:10:34 UTC | #21

    Please don't take offense to the tone of technical statements relating to troubleshooting. It's not personal; it's technical. Glad it's working now!


    Daniel_Lewis | 2024-09-27 16:06:44 UTC | #22

    No worries. No offense taken, personally or otherwise.


    system | 2024-10-28 16:07:16 UTC | #23

    This topic was automatically closed 31 days after the last reply. New replies are no longer allowed.


    This post was migrated from the old Developer Forum.

    ref: 29433