Snapchat Login Kit error: Missing PKCE parameters

Question

I'm trying to login to Snapchat from my app using their Login Kit.

This code (i changed the clientId):

onSnapChat() {
    const state = `c25hcGNoYXR0ZXN0`;
    const redirectUri = `https://us-central1-library.cloudfunctions.net/redirectSnapchat`;
    const clientId = `45fad898-162e-48e0-8e4e-135adbc42716`;
    const scopeList = ['https://auth.snapchat.com/oauth2/api/user.display_name'];
    const scope = scopeList.join(' ');
    const loginQS = {
        client_id: clientId,
        redirect_uri: redirectUri,
        response_type: 'code',
        scope: scope,
        state: state
    };

    const stringifyLoginQS = qs.stringify(loginQS);
    const SNAP_ACCOUNTS_LOGIN_URL = 'https://accounts.snapchat.com/accounts/oauth2/auth';
    window.open(SNAP_ACCOUNTS_LOGIN_URL + '?' + stringifyLoginQS, '_blank');
}

Generates this url: https://accounts.snapchat.com/accounts/oauth2/auth?client_id=45fad898-162e-48e0-8e4e-135adbc42716&redirect_uri=https%3A%2F%2Fus-central1-library-titleix.cloudfunctions.net%2FredirectSnapchat&response_type=code&scope=https%3A%2F%2Fauth.snapchat.com%2Foauth2%2Fapi%2Fuser.display_name&state=c25hcGNoYXR0ZXN0

Which returns this error: {"error":"invalid_request","error_description":"Missing PKCE parameters."}

Notes: 1. the redirect_uri matches the redirect uri whitelisted with Snapchat 2. i'm using the development environment OAUTH2 CLIENT ID 3. the redirect uri is to a Firebase cloud function. it never gets hit.

Any suggestions?

Thank you, r

I have not worked with Snapchat OAuth but the error means that you are missing two items in `loginQS`: `code_challenge` and `code_challenge_method`. Auth0 has a good document that explains PKCE. — John Hanley, Jan 22 '19 at 21:53
I have not figured it out yet. When I do, I'll post it here. — RichardZ, Jan 24 '19 at 23:29

score 4 · Answer 1 · answered Jun 07 '19 at 03:53

Building on Jon Hanley's Comment the following modification to your code should work, this is the same addition (of code_challenge, and code_challenge_method) to LoginQS that fixed the same PCKE issue for me.

Try this modified code; I did in fact pass the state variable for the code_challenge and state keys with no issue:

onSnapChat() {
    const state = `c25hcGNoYXR0ZXN0`;
    const redirectUri = `https://us-central1-library.cloudfunctions.net/redirectSnapchat`;
    const clientId = `45fad898-162e-48e0-8e4e-135adbc42716`;
    const scopeList = ['https://auth.snapchat.com/oauth2/api/user.display_name'];
    const scope = scopeList.join(' ');
    const loginQS = {
        client_id: clientId,
        redirect_uri: redirectUri,
        code_challenge: state,
        code_challenge_method: "S256",
        response_type: 'code',
        scope: scope,
        state: state
    };

    const stringifyLoginQS = qs.stringify(loginQS);
    const SNAP_ACCOUNTS_LOGIN_URL = 'https://accounts.snapchat.com/accounts/oauth2/auth';
    window.open(SNAP_ACCOUNTS_LOGIN_URL + '?' + stringifyLoginQS, '_blank');
}

have you used the `code_verifier` field to swap for an access token and refresh token for use with the server-side API? I am trying to use SHA256 to hash the code_verifier, pass the hashed value as `code_challenge`, then pass the original string as `code_verifier`, but Snapchat keeps returning an error saying that the verifier is invalid. https://stackoverflow.com/questions/60900259/how-to-pass-code-challenge-and-code-verifier-for-snapchat-api Do you have any experience with this? — Symphony0084, Mar 28 '20 at 20:00

score 1 · Answer 2 · answered Mar 28 '20 at 09:31

Although it will work fine to pass a static string as state and code_challenge, the whole point of it is so that you can know for certain that the redirect to your app is truly coming from snapchat and not an attacker. An attacker could easily see that you use the same static code every time and use that in his/her phony request. Instead, you should try to generate a unique code each time (server-side) and store it securely for a specific time limit. Then when you get an incoming request to your firebase function, you can verify that the code matches what you have stored. That way you know it came from snapchat.

Snapchat Login Kit error: Missing PKCE parameters

2 Answers2