AdobeDocs · jeff-matthews · Jul 9, 2025 · Jul 9, 2025 · Jul 9, 2025 · Jul 10, 2025
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -97,6 +97,7 @@ jobs:
           ALGOLIA_WRITE_API_KEY: ${{ secrets.AIO_ALGOLIA_WRITE_API_KEY }}
           GATSBY_ALGOLIA_INDEX_NAME: ${{ secrets.ALGOLIA_INDEX_NAME || github.event.repository.name }}
           GATSBY_FEDS_PRIVACY_ID: ${{ secrets.AIO_FEDS_PRIVACY_ID }}
+          GATSBY_TEMPLATE_ID: replace-me
           GATSBY_SITE_DOMAIN_URL: https://developer.adobe.com
       - name: Deploy
         uses: AdobeDocs/static-website-deploy@master

diff --git a/.github/workflows/stage.yml b/.github/workflows/stage.yml
@@ -109,6 +109,7 @@
             GATSBY_ALGOLIA_SEARCH_API_KEY: ${{ secrets.AIO_ALGOLIA_SEARCH_API_KEY }}
             ALGOLIA_INDEXATION_MODE: skip
             GATSBY_ALGOLIA_INDEX_NAME: ${{ secrets.ALGOLIA_INDEX_NAME || github.event.repository.name }}
+            GATSBY_TEMPLATE_ID: replace-me
             GATSBY_FEDS_PRIVACY_ID: ${{ secrets.AIO_FEDS_PRIVACY_ID }}
             GATSBY_SITE_DOMAIN_URL: https://developer-stage.adobe.com
 

diff --git a/gatsby-config.js b/gatsby-config.js
@@ -18,6 +18,7 @@ module.exports = {
       "title": "Commerce",
       "path": "/commerce/docs"
     },
+    template_id: process.env.GATSBY_TEMPLATE_ID,
     pages: pages,
     subPages: subPages,
   },

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -0,0 +1,8 @@
+exports.createSchemaCustomization = ({ actions }) => {
+    const { createTypes } = actions
+    createTypes(`
+        type SiteSiteMetadata {
+          template_id: String
+        }
+      `)
+  }
diff --git a/src/pages/credential/GetCredentialOauthS2s.js b/src/pages/credential/GetCredentialOauthS2s.js
@@ -0,0 +1,208 @@
+import React from 'react'
+import { GetCredential } from '@adobe/gatsby-theme-aio/src/components/GetCredential';
+import { graphql, useStaticQuery } from 'gatsby';
+import commerce from "./images/commerce.svg";
+
+const GetCredentialOAuthS2s = () => {
+
+  const data = useStaticQuery(
+      graphql`
+      query { 
+        site {
+          siteMetadata{
+            template_id
+          }
+        }
+      }
+    `
+    )
+
+    // This line uses JavaScript object destructuring to extract the 'template_id' property from the 'siteMetadata' object,
+    // which is nested inside the 'site' object of the 'data' object returned by the GraphQL query.
+    // If any of these objects ('data', 'site', or 'siteMetadata') are undefined or null, it defaults to an empty object,
+    // so 'template_id' will be undefined instead of causing a runtime error. Only needed temporarily so builds don't fail.
+    const { template_id } = data?.site?.siteMetadata || {};
+
+  return (
+
+    <GetCredential className="getCredentialContainer" templateId={template_id} productName='Adobe Commerce as a Cloud Service' >
+
+      <GetCredential.SignIn title="Get credentials" paragraph="After signing in, you can create credentials that can be used to call the Commerce APIs." buttonText="Sign in" />
+
+      <GetCredential.Form title="Get credentials" paragraph="Create credentials that you can use to call the Commerce APIs." className="formClass">
+
+        <GetCredential.Form.CredentialName label="Credential name" description="The credential name must be unique, use alphanumeric characters, and between 6 and 45 characters long. A project will be automatically created with the same name in Adobe Developer Console." range="45" />
+
+        <GetCredential.Form.Products label="Included products and services">
+          <GetCredential.Form.Product label="Adobe Commerce as a Cloud Service" icon={commerce} />
+        </GetCredential.Form.Products>
+
+        <GetCredential.Form.AdobeDeveloperConsole label='By checking this box, you agree to' linkText="Adobe Developer Terms of Use" href="https://wwwimages2.adobe.com/content/dam/cc/en/legal/servicetou/Adobe-Developer-Additional-Terms_en-US_20230822.pdf" />
+
+        <GetCredential.Form.Side>
+          <div style={{ display: "flex", gap: "32px", flexDirection: "column" }}>
+            <div style={{ display: "flex", gap: "16px", flexDirection: "column" }}>
+              <h3 className="spectrum-Heading spectrum-Heading--sizeS side-header">
+                OAuth server-to-server credential
+              </h3>
+              <p className="spectrum-Body spectrum-Body--sizeM">
+                This credential allows you to use industry standard OAuth2.0 libraries to generate access tokens using the OAuth 2.0 client credentials grant type.
+              </p>
+            </div>
+            <div style={{ display: "flex", gap: "16px", flexDirection: "column" }}>
+              <h3 className="spectrum-Heading spectrum-Heading--sizeS side-header">
+                Learn more
+              </h3>
+              <a style={{ color: "#0265DC" }} href="https://experienceleague.adobe.com/en/docs/experience-platform/landing/platform-apis/api-authentication">
+                Authentication documentation
+              </a>
+              <a style={{ color: "#0265DC" }} href="https://experienceleague.adobe.com/en/docs/experience-platform/landing/platform-apis/api-guide">
+                Adobe Experience Platform API documentation
+              </a>
+              <a style={{ color: "#0265DC" }} href="https://experienceleague.adobe.com/en/docs/experience-platform">
+                Adobe Experience Platform documentation
+              </a>
+            </div>
+          </div>
+        </GetCredential.Form.Side>
+
+      </GetCredential.Form>
+
+      <GetCredential.UnknownError helpLink="https://some_help_link" helpLinkText="Get Help" className="unKnownError" />
+
+      <GetCredential.Card title="Your credential is ready to use" developerConsoleManage="Manage on Developer Console" className="card_developer_console" devConsoleDirection="/console" isCollapsable="true">
+
+        <GetCredential.Card.Side>
+          <div style={{ display: "flex", gap: "32px", flexDirection: "column" }}>
+            <div style={{ display: "flex", gap: "16px", flexDirection: "column" }}>
+              <h3 className="spectrum-Heading spectrum-Heading--sizeS side-header">
+                OAuth server-to-server credential
+              </h3>
+              <p className="spectrum-Body spectrum-Body--sizeM">
+                This credential allows you to use industry standard OAuth2.0 libraries to generate access tokens using the OAuth 2.0 client credentials grant type.
+              </p>
+            </div>
+            <div style={{ display: "flex", gap: "16px", flexDirection: "column" }}>
+              <h3 className="spectrum-Heading spectrum-Heading--sizeS side-header">
+                Learn more
+              </h3>
+              <a style={{ color: "#0265DC" }} href="https://experienceleague.adobe.com/en/docs/experience-platform/landing/platform-apis/api-authentication">
+                Authentication documentation
+              </a>
+              <a style={{ color: "#0265DC" }} href="https://experienceleague.adobe.com/en/docs/experience-platform/landing/platform-apis/api-guide">
+                Adobe Experience Platform API documentation
+              </a>
+              <a style={{ color: "#0265DC" }} href="https://experienceleague.adobe.com/en/docs/experience-platform">
+                Adobe Experience Platform documentation
+              </a>
+            </div>
+          </div>
+        </GetCredential.Card.Side>
+
+        <GetCredential.Card.Products label="Included products and services">
+          <GetCredential.Card.Product label="Adobe Commerce as a Cloud Service" icon={commerce} />
+        </GetCredential.Card.Products>
+
+        <GetCredential.Card.ProjectsDropdown label="Projects" subHeading="Only your projects that contain credentials are shown" />
+
+        <GetCredential.Card.ManageDeveloperConsole label="Manage all your projects and credentials on Adobe Developer Console" direction='/console' />
+
+        <GetCredential.Card.DevConsoleLink heading="Developer Console Project" />
+
+        <GetCredential.Card.AccessToken helpText="" buttonLabel="Generate and copy token" heading={(<>Access token<br/><br/> <span style="font-weight:normal"><small>After copying the access token, you must prepend the token with <code>Bearer</code> to use it with API calls.</small></span></>)} />
+
+
+        <GetCredential.Card.CredentialDetails heading={(<>Credential details<br/><br/> <span style="font-weight:normal"><small>You can use the following credential details to try out the Adobe Commerce as a Cloud Service REST API below.<ul><li>Client ID: Your public identifier for accessing the API. This acts as an API key when used with the Commerce APIs, and corresponds with the <code>x-api-key</code> header.</li><li>Organization ID: The ID of the organization you're using with the Commerce APIs. This corresponds with the <code>x-gw-ims-org-id</code> header.</li></ul></small></span></>)} orderBy="ClientId,ImsOrgID">
+          <GetCredential.Card.CredentialDetails.ClientId heading="Client ID (x-api-key)" />
+          <GetCredential.Card.CredentialDetails.ImsOrgID heading="Organization ID" />
+          <GetCredential.Card.CredentialDetails.Scopes heading="Scopes" scope="openid,session,AdobeID,read_organizations,additional_info.projectedProductContext" />
+        </GetCredential.Card.CredentialDetails>
+
+      </GetCredential.Card>
+
+      <GetCredential.Return title="Previously created projects" paragraph="Select a project and access your existing credentials for Adobe Commerce as a Cloud Service." className="card_developer_console" isCollapsable="true">
+
+        <GetCredential.Return.Side>
+          <GetCredential.Return.Side.Custom>
+            <div style={{ display: "flex", gap: "30px", flexDirection: "column", width: "100%" }}>
+              <h3 className='spectrum-Heading spectrum-Heading--sizeM'>Welcome back</h3>
+              <p className="spectrum-Body spectrum-Body--sizeM">You can either re-use an existing credential or create a new credential.</p>
+            </div>
+          </GetCredential.Return.Side.Custom>
+          <GetCredential.Return.Side.NewCredential heading="Need another credential?" buttonLabel="Create new credential" />
+        </GetCredential.Return.Side>
+
+        <GetCredential.Return.CredentialDetails heading={(<>Credential details<br/><br/> <span style="font-weight:normal"><small>You can use the following credential details to try out the Adobe Commerce as a Cloud Service REST API below.<ul><li>Client ID: Your public identifier for accessing the API. This acts as an API key when used with the Platform APIs, and corresponds with the <code>x-api-key</code> header.</li><li>Organization ID: The ID of the organization you're using with the Commerce APIs. This corresponds with the <code>x-gw-ims-org-id</code> header.</li></ul></small></span></>)} orderBy="ClientId,ImsOrgID">
+          <GetCredential.Return.CredentialDetails.ClientId heading="Client ID (x-api-key)" />
+          <GetCredential.Return.CredentialDetails.ImsOrgID heading="Organization ID" />
+          <GetCredential.Return.CredentialDetails.Scopes heading="Scopes" scope="openid,session,AdobeID,read_organizations,additional_info.projectedProductContext" />
+        </GetCredential.Return.CredentialDetails>
+
+        <GetCredential.Return.ProjectsDropdown label="Projects" subHeading="Only your projects that contain credentials are shown" />
+
+        <GetCredential.Return.ManageDeveloperConsole label="Manage all your projects and credentials on Adobe Developer Console" direction='/console/projects' />
+
+        <GetCredential.Return.AccessToken helpText="" buttonLabel="Generate and copy token" heading={(<>Access token<br/><br/> <span style="font-weight:normal"><small>After copying the access token, you must prepend the token with <code>Bearer</code> to use it with API calls.</small></span></>)} />
+
+        <GetCredential.Return.DevConsoleLink heading="Developer Console project" />
+
+        <GetCredential.Return.Products label="Included products and services">
+          <GetCredential.Return.Product label="Adobe Commerce as a Cloud Service" icon={commerce} />
+        </GetCredential.Return.Products>
+
+      </GetCredential.Return>
+
+      <GetCredential.RequestAccess
+        title="Get credentials"
+        paragraph="Create unique credentials that you will use to call multiple APIs from your application."
+      >
+        <GetCredential.RequestAccess.EdgeCase>
+          <GetCredential.RequestAccess.EdgeCase.NoProduct title="Your organization does not have access to Adobe Commerce as a Cloud Service." />
+          <GetCredential.RequestAccess.EdgeCase.Type1User title="You do not have access to Adobe Commerce as a Cloud Service. Please use another organization and try again." />
+          <GetCredential.RequestAccess.EdgeCase.NotMember title="You do not have access to Adobe Commerce as a Cloud Service. Please use another organization and try again." />
+        </GetCredential.RequestAccess.EdgeCase>
+
+        <GetCredential.RequestAccess.RestrictedAccess
+          title="Restricted Access"
+          buttonLabel="Request access"
+        >
+          <GetCredential.RequestAccess.RestrictedAccess.Products label="Included products and services">
+            <GetCredential.RequestAccess.RestrictedAccess.Products.Product
+              icon={commerce}
+              label="Adobe Commerce as a Cloud Service"
+            />
+          </GetCredential.RequestAccess.RestrictedAccess.Products>
+        </GetCredential.RequestAccess.RestrictedAccess>
+        <GetCredential.RequestAccess.RequestAccessSide>
+          <div style={{ display: "flex", gap: "32px", flexDirection: "column" }}>
+            <div style={{ display: "flex", gap: "16px", flexDirection: "column" }}>
+              <h3 className="spectrum-Heading spectrum-Heading--sizeS side-header">
+                OAuth server-to-server credential
+              </h3>
+              <p className="spectrum-Body spectrum-Body--sizeM">
+                This credential allows you to use industry standard OAuth2.0 libraries to generate access tokens using the OAuth 2.0 client credentials grant type.
+              </p>
+            </div>
+            <div style={{ display: "flex", gap: "16px", flexDirection: "column" }}>
+              <h3 className="spectrum-Heading spectrum-Heading--sizeS side-header">
+                Learn more
+              </h3>
+              <a style={{ color: "#0265DC" }} href="https://experienceleague.adobe.com/en/docs/experience-platform/landing/platform-apis/api-authentication">
+                Authentication documentation
+              </a>
+              <a style={{ color: "#0265DC" }} href="https://experienceleague.adobe.com/en/docs/experience-platform/landing/platform-apis/api-guide">
+                Adobe Experience Platform API documentation
+              </a>
+              <a style={{ color: "#0265DC" }} href="https://experienceleague.adobe.com/en/docs/experience-platform">
+                Adobe Experience Platform documentation
+              </a>
+            </div>
+          </div>
+        </GetCredential.RequestAccess.RequestAccessSide>
+      </GetCredential.RequestAccess>
+    </GetCredential>
+
+  )
+}
+
+export default GetCredentialOAuthS2s;
diff --git a/src/pages/credential/README.md b/src/pages/credential/README.md
@@ -0,0 +1,112 @@
+# Credential template ID implementation
+
+The `GetCredentialOAuthS2s` component requires a `template_id` to function properly with Adobe Developer Console. This document outlines the implementation approaches and recommended path forward.
+
+## Original implementation
+
+The component originally used a [hardcoded](https://github.com/AdobeDocs/adobe-dev-console/pull/140/files#diff-38dc7fe67ef001ab68b7a9aabf74b5b6b7113b0e8f7ead09a6413447f5539cf8R9) `template_id` value directly in the code:
+
+```javascript
+<GetCredential className="getCredentialContainer" templateId="66576a0de3cedc3a36fc9f28" productName="Firefly Services">
+```
+
+**Pros:**
+
+- Simple and straightforward
+- No environment configuration needed
+- Works immediately for testing
+
+**Cons:**
+
+- Not environment-aware (same ID for staging/production)
+- Requires code changes to switch environments, which matters because we need to validate on staging first as part of the test plan
+
+## Preferred approach
+
+Similar to the [AEM team's implementation](https://github.com/AdobeDocs/experience-platform-apis/tree/main/src/pages/credentials), use environment variables to manage different template IDs per environment:
+
+```javascript
+// In gatsby-config.js
+module.exports = {
+  siteMetadata: {
+    template_id: process.env.GATSBY_TEMPLATE_ID,
+    // ... other metadata
+  }
+}
+
+// In the component
+const { template_id } = data?.site?.siteMetadata || {};
+```
+
+**Environment variables:**
+
+- `GATSBY_TEMPLATE_ID_STAGING` - Template ID for staging environment
+- `GATSBY_TEMPLATE_ID_PRODUCTION` - Template ID for production environment
+
+**Pros:**
+
+- Environment-specific template IDs
+- No code changes needed to switch environments
+
+**Cons:**
+
+- Requires environment configuration
+- More complex initial setup
+- Unclear how local dev builds should work; maybe use staging ID
+
+## Short-term compromise
+
+To enable immediate testing while planning the full environment variable implementation:
+
+### Option 1: Hardcoded with fallback
+
+```javascript
+const { template_id } = data?.site?.siteMetadata || {};
+const fallbackTemplateId = "your_staging_template_id_here"; // Replace with actual ID
+const finalTemplateId = template_id || fallbackTemplateId;
+```
+
+### Option 2: Environment variable with hardcoded fallback
+
+```javascript
+// In gatsby-config.js
+module.exports = {
+  siteMetadata: {
+    template_id: process.env.GATSBY_TEMPLATE_ID || "fallback_template_id_here",
+    // ... other metadata
+  }
+}
+```
+
+## Implementation plan
+
+### Phase 1: Immediate testing
+
+- Use the short-term compromise approach
+- Test component functionality with hardcoded template ID
+- Validate the component works as expected
+
+### Phase 2: Environment variable implementation
+
+- Set up environment-specific template IDs
+- Update CI/CD pipelines to inject correct environment variables
+- Remove hardcoded fallbacks
+- Test in staging and production environments
+
+### Phase 3: Documentation and rollout
+
+- Document the environment variable approach
+- Train team on the new implementation
+- Monitor for any issues in production
+
+## Required actions
+
+1. **Immediate:** Replace the current undefined `template_id` with a hardcoded staging template ID for testing
+2. **Short-term:** Coordinate with DevOps to set up environment variables in CI/CD (GitHub secrets vs hardcoded in workflow files)
+3. **Long-term:** Implement full environment variable approach across all environments
+
+## Template ID sources
+
+- **Staging:** Adobe Developer Console staging project template ID
+- **Production:** Adobe Developer Console production project template ID
+- **Local Development:** Use staging template ID for local testing
diff --git a/src/pages/credential/images/commerce.svg b/src/pages/credential/images/commerce.svg
diff --git a/src/pages/reference/rest/saas.md b/src/pages/reference/rest/saas.md
@@ -4,7 +4,11 @@ description: Review comprehensive reference documentation for the Adobe Commerce
 keywords:
   - REST
 edition: saas
-frameSrc: https://adobe-commerce-saas.redoc.ly
+# frameSrc: https://adobe-commerce-saas.redoc.ly
 --- 
 
-# REST endpoints for Adobe Commerce as a Cloud Service
+import GetCredentialOAuthS2s from '../../credential/GetCredentialOAuthS2s.js'
+
+<GetCredentialOAuthS2s />
+
+<RedoclyAPIBlock src="/commerce-webapi/src/openapi/accs-schema.yaml"/>