Learn how to run end-to-end tests against your deployment in your CI/CD workflow by creating an authentication bypass token. ## Step 1: Generate the authentication bypass token 1. [Generate a deployment token](/docs/storefronts/headless/hydrogen/deployments/custom-ci-cd) in the Shopify admin. 1. Modify your CI/CD file to include the [deploy](/docs/api/shopify-cli/hydrogen/hydrogen-deploy) command. <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="sh"> npx shopify hydrogen deploy --auth-bypass-token --token $SHOPIFY_HYDROGEN_DEPLOYMENT_TOKEN </script> </div> </p> 1. The command outputs a file named `h2_deploy_log.json`, which contains the deployment URL and the authentication bypass token that you can feed into your end-to-end testing system. ### Token duration By default, tokens are valid for two hours. You can modify this duration by supplying the `--auth-bypass-token-duration` flag to the `deploy` command. The duration can be set to any whole number of hours from 1 to 12. <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="sh"> npx shopify hydrogen deploy --auth-bypass-token --auth-bypass-token-duration=5 --token $SHOPIFY_HYDROGEN_DEPLOYMENT_TOKEN </script> </div> </p> ### Example GitHub workflow If you're using GitHub workflow files, then edit the deploy step per the following example. If you're using another CI/CD system, then refer to these [example workflows](/docs/storefronts/headless/hydrogen/deployments/custom-ci-cd#example-workflows). <p> <div class="react-code-block" data-preset="file"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script data-option="filename" data-value=".github/workflows/oxygen-deployment.yml"></script> <script type="text/plain" data-language="yml"> ... jobs: deploy: ... steps: - name: Build and Publish to Oxygen id: deploy run: - npx shopify hydrogen deploy --auth-bypass-token --token $SHOPIFY_HYDROGEN_DEPLOYMENT_TOKEN - name: Run End-to-end Tests run: | export AUTH_BYPASS_TOKEN=$(jq -r '.authBypassToken' h2_deploy_log.json) export DEPLOYMENT_URL=$(jq -r '.url' h2_deploy_log.json) npm run e2e-test </script> </div> </p> Refer to a live example in the [Hydrogen Demo Store](https://github.com/Shopify/hydrogen-demo-store/blob/main/.github/workflows/oxygen-deployment-1000013955.yml). ## Step 2: Embed the authentication bypass token in the request header Your end-to-end testing system must embed the token within the header before navigating to the deployment URL. <p> <div class="react-code-block" data-preset="basic"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar basic-codeblock"></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="sh"> oxygen-auth-bypass-token: <auth-bypass-token> </script> </div> </p>