React Native Requires Chilkat v10.1.2+

Shopify OAuth2 Authentication

See more OAuth2 Examples

This example shows how to obtain an initial access token for a Shopify application using OAuth2 authentication specifically for non-web applications. This process requires displaying a browser window to secure user authorization. In contrast, web-based applications use a different method to obtain an OAuth2 token, as they redirect back to the application via a URL. Note: Once you have the access token, all subsequent Chilkat examples that rely on an already-obtained token are applicable to both web and non-web applications. React Native

import { OAuth2, StringBuilder } from '@chilkat/react-native'

function chilkatExample() {
  // To further clarify, see OAuth 2.0 Authorization Flow

  const oauth2 = new OAuth2();

  // This should be the port in the localhost callback URL for your app.  
  // The callback URL would look like "http://localhost:3017/" if the port number is 3017.
  // Make sure that "http://localhost:3017/" is listed in your Whitelisted Redirection URLs for your Shopify app.
  oauth2.listenPort = 3017;

  // The full content of the Authorization Endpoin for Shopify looks like this:
  // https://{shop}.myshopify.com/admin/oauth/authorize?client_id={api_key}&scope={scopes}&redirect_uri={redirect_uri}&state={nonce}&grant_options[]={option}

  // Replace "chilkat" with your shop name.
  oauth2.authorizationEndpoint = 'https://chilkat.myshopify.com/admin/oauth/authorize';
  oauth2.tokenEndpoint = 'https://chilkat.myshopify.com/admin/oauth/access_token';

  // Replace this with your actual API KEY (client ID)
  oauth2.clientId = 'SHOPIFY_API_KEY';

  // This is for Require Proof Key for Code Exchange (PKCE)
  // See OAuth2 PKCE Explained
  oauth2.codeChallenge = true;
  oauth2.codeChallengeMethod = 'S256';

  // Set requested scopes.  See https://help.shopify.com/api/getting-started/authentication/oauth
  oauth2.scope = 'read_product_listings,read_customers,read_orders,read_draft_orders';

  // Begin the OAuth2 Authorization code flow.  This returns a URL that should be loaded in a browser.
  let url: string;
  try {
    url = oauth2.startAuth();
  } catch {
    console.log(oauth2.lastErrorText);
    return;
  }

  // Launch the default browser on the system and navigate to the url.
  // The LaunchBrowser method was added in Chilkat v10.1.2.
  try {
    oauth2.launchBrowser(url);
  } catch {
    console.log(oauth2.lastErrorText);
    return;
  }

  // Wait for the user to approve or deny authorization in the browser.
  let numMsWaited = 0;
  while ((numMsWaited < 90000) && (oauth2.authFlowState < 3)) {
    oauth2.sleepMs(100);
    numMsWaited += 100;
  }

  // If the browser does not respond within the specified time, AuthFlowState will be:
  // 
  // 1: Waiting for Redirect – The OAuth2 background thread is waiting for the browser's redirect request.
  // 2: Waiting for Final Response – The thread is awaiting the final access token response.
  // In either case, cancel the background task initiated by StartAuth.

  if (oauth2.authFlowState < 3) {
    oauth2.cancel();
    console.log('No response from the browser!');
    return;
  }

  // Check AuthFlowState to determine if authorization was granted, denied, or failed:
  // 
  // 3: Success – OAuth2 flow completed, the background thread exited, and the successful response is in AccessTokenResponse.
  // 4: Access Denied – OAuth2 flow completed, the background thread exited, and the error response is in AccessTokenResponse.
  // 5: Failure – OAuth2 flow failed before completion, the background thread exited, and error details are in FailureInfo.

  if (oauth2.authFlowState === 5) {
    console.log('OAuth2 failed to complete.');
    console.log(oauth2.failureInfo);
    return;
  }

  if (oauth2.authFlowState === 4) {
    console.log('OAuth2 authorization was denied.');
    console.log(oauth2.accessTokenResponse);
    return;
  }

  if (oauth2.authFlowState !== 3) {
    console.log(`Unexpected AuthFlowState:${oauth2.authFlowState}`);
    return;
  }

  console.log('OAuth2 authorization granted!');
  console.log(`Access Token = ${oauth2.accessToken}`);

  // Save the full JSON access token response to a file.
  const sbJson = new StringBuilder();
  sbJson.append(oauth2.accessTokenResponse);
  sbJson.writeFile('qa_data/tokens/shopify-access-token.json', 'utf-8', false);

  // The saved JSON response looks like this:

  // {
  //   "access_token": "1364e43a5332583188cb27bc85469b1f",
  //   "scope": "read_product_listings,read_customers,read_orders,read_draft_orders"
  // }
}