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

Answer 1

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');
}

Answer 2

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.