Tony Xu Blog - English

My second brain setup

Fri, 08 May 2026 00:00:00 GMT

How I set up a private Markdown-first second brain with semantic search, AI agents, raw capture, and quiet automation.

The Next AI Race May Be Won at the Application Layer

Fri, 01 May 2026 00:00:00 GMT

I have been thinking about this for a while: AI competition is not only about who has the best foundation model.

Models matter. Chips matter. Infrastructure matters. But the next stage may be more about who can turn AI into real products, real companies, and real workflows faster.

That is why I am increasingly optimistic about China’s AI application layer.

This is not a prediction that China will “beat” the US. The US will continue to lead in many frontier areas, including research, chips, cloud platforms, the developer ecosystem, and globally distributed AI products. The more interesting question is what kind of AI-native ecosystem China will build for its own market—and what that ecosystem might teach the rest of the world.

The model layer is only the beginning

The foundation-model race gets most of the attention because it is easy to measure: benchmark scores, context windows, training runs, and model launches. Those things are important, but they are not the same as building useful products.

As models become cheaper, more capable, and easier to integrate, the application layer becomes more important. The advantage may shift toward the teams that can identify valuable problems, design better workflows, and iterate quickly enough to keep up with the technology.

The companies that emerge from this wave will not simply add an AI feature to an existing product. Many will be designed around AI from day one:

smaller teams with more leverage;
faster product cycles;
more automation built into everyday operations;
workflows designed around what AI can do, rather than around older software boundaries.

The model is a building block. The product is where users experience the value.

Why China’s application layer is interesting

China has a large pool of technology talent, a huge consumer market, a strong hardware supply chain, and a culture that is generally open to new technology. It also has a history of fast product iteration and intense competition.

We saw this pattern with mobile internet, social networks, mobile payments, and crypto/web3. China did not simply copy the US market. It developed its own product patterns, user behaviors, and business ecosystems in response to local conditions.

AI may follow a similar path.

The key opportunity is not just access to a powerful model. It is the combination of capable models, local distribution, user behavior, engineering execution, and a willingness to redesign how work gets done. Those factors can create products that look different from their American counterparts even when they are built on similar underlying technology.

A lively model ecosystem

Chinese foundation-model companies are already serious participants in the global conversation. DeepSeek, Z.ai, MiniMax, Qwen, Kimi, and others are building a diverse ecosystem. They may not all win, but the ecosystem is clearly alive.

That diversity matters. Competition at the model layer can push costs down and capabilities up. More importantly, it gives application builders more options: different model personalities, deployment choices, pricing models, and trade-offs between speed, quality, and control.

When the cost of intelligence falls, more ideas become economically viable. A small team can test a product that would previously have required a much larger organization. An existing company can automate a process that used to be too expensive to improve. Entirely new workflows become possible.

From AI-enabled to AI-native

There is a meaningful difference between an existing company that uses AI and a company designed around AI from the beginning.

An AI-enabled company may add a chatbot, generate marketing copy, or automate a few internal tasks. An AI-native company can rethink its operating model: how it serves customers, how it makes decisions, how its employees collaborate, and which parts of the business need to exist at all.

That shift could produce companies with very different shapes from the software companies we are used to. They may have fewer employees, rely on more automated processes, and move from idea to product much faster. Their advantage may come less from owning a large organization and more from designing a system in which people and models work together effectively.

This is where application-layer competition becomes especially interesting. The winners may not be the companies with the biggest training budget. They may be the ones that understand a specific market deeply and move quickly enough to turn that understanding into a useful product.

A more useful question

The US–China framing is tempting, but “who will win AI?” is probably too simple a question.

The US and China have different strengths, markets, constraints, and product cultures. The US may continue to lead in many frontier capabilities and global platforms. China may build a very large and distinctive AI-native ecosystem for its own market. Both can be true at the same time.

The more useful question is: what kinds of companies and workflows will each ecosystem create when AI becomes cheap, capable, and ubiquitous?

In the last wave, mobile internet changed how people live. This wave may change how companies are built.

That is why I am watching the application layer so closely. The next important AI story may not be another model release. It may be the company that uses existing models to build an entirely new way of working.

This essay expands on a LinkedIn post I shared earlier.

Top Engineering Blogs from Tech Companies to Follow in 2023

Thu, 13 Apr 2023 00:00:00 GMT

Company engineering blogs I followed in 2023 to learn about reliable systems, infrastructure, and engineering practice.

My Productivity Tools and Development Setup in 2019

Fri, 01 Feb 2019 00:00:00 GMT

This article describes the setup I used in 2019. Several products, plans, and links have changed or been discontinued.

Hardware

Laptop

👉 Apple MacBook Pro (13-inch, 2017, Four Thunderbolt 3 Ports)

13-inch
2017 Year
3.5 GHz Intel Core i7 Processor
16 GB Memory
256 GB Storage

My MacBook Pro (company provided) is my most important productivity tool. I use it to code, write blogs, and everything else.

Mobile Phone

👉 Apple iPhone X

I'm using iPhone X as my mobile phone. I have been an iPhone person ever since 2013 from an iPhone 4. Before iPhone, I have been playing with Android phones (Nexus S) for a while. The iOS ecosystem, better notification system and app quality are the key reasons I stick with iOS devices.

Desktop

I don't actually have a desktop machine. Since my employer has $150 Azure credits for employees so I just created a Windows VM in Azure to use as a Windows desktop machine. I used the VM to install/test any software that is only available for Windows, for example, Power BI Desktop.

Work Station (where I work)

👉 ThinkVision P27h (dual monitors)

Provided for me to use at work. I connect my laptop to two external monitors and I usually have my laptop open slack window, one external monitor open Chrome browser, and one monitor open Outlook/VS Code. It also supports USB Type-C so you can get display output and charging with just one cable.

👉 Herman Miller - Renew Sit-to-Stand Desk Rectangular

Provided for me to use at work. Although it's cool and encourages you to stand to work to keep healthy, I felt more comfortable sitting behind it.

👉 Apple Magic Keyboard with Numeric Keypad

The external keyboard allows me to put my laptop farther from me and more close to other monitors so the three screens can be almost in the same surface.

👉 Apple Magic Trackpad 2

I'm really a fan of trackpad. I can never go back to the old time when I was using a mouse. When I'm using an external keyboard, I have to have an external trackpad as well since I can't get to the trackpad of the MacBook.

Accessories

👉 Apple AirPods

AirPods are my favorite accessory because they are convenient, and I often forget I am wearing them. Unlike in-ear earphones that can make it hard to hear other people, AirPods let you notice when someone is trying to talk to you without needing to tap you for attention.

👉 Apple Watch (1st generation)

I have been using Apple Watch since 2014 when its first generation was released. Apple Watch is great for people like me who don't bother taking out iPhone from pocket to just read notifications. Apple Watch does this one job for me and does it well.

Software

macOS Apps

👇

Chrome: One of the most popular browsers in the world. I use it for web development because it offers a great debugging experience.
Slack: The most popular team collaboration app, great for developers. It integrates with almost all your development tools and services to streamline your development workflow and team collaboration experience.
VS Code: I used to be a Sublime Text fan, but switched to VS Code in 2016 because of its active development and extension community. Refer to VS Code Extensions for the extensions I use.
Sketch: Most popular web/app design software (macOS only). Very easy to create web/app design without professional design knowledge. I used it to design web/app prototypes and read design spec from designers.
GitHub Desktop: An official desktop client for GitHub. I use it as an alternative for Git commands when I want to get visualized diffs.
Paw: An advanced REST API desktop client for macOS. I like it much more than Postman, which is more of a web app. Paw has a native macOS interface and extensions for advanced needs. I use it to troubleshoot REST API requests.
Microsoft Remote Desktop: A Windows remote desktop client. I use it to connect to Azure Windows VM.
Alfred 3: A shortcut tool. There are many great plugins that allow you to trigger automation from shortcut. I use it for searching, clipboard history, snippet, and uploading images from pasteboard.
Bear: A markdown note app. Element UI and smooth typing experience.
BlueJeans/Zoom/WebEx: Online meeting, to have video meeting with your team members without having to meet in person.
Charles: A web proxy that allows you to debug network traffic. I use it to inspect network requests made outside the Chrome browser.
FileZilla: An FTP tool that helps you upload and download files to and from a remote host.
GIF Brewery 3: A GIF maker app for macOS. I used it to record screen as a GIF so that when I shared it with others it was easier to view than a video clip. Its former Gfycat page is no longer available.
Magnet: A macOS window manager. I usually have multiple apps opened in multiple monitors, it's really helpful to use shortcut to move and resize apps between monitors.
Microsoft Office Word/Excel/Outlook/PowerPoint/Teams: Classic office productivity suite provided by Microsoft.
Monosnap: A free advanced screenshot tool. You can make annotations with the screenshot and it has integration with cloud storage so you can get a sharable link immediately.
Reeder: An RSS reader. You can also login with third-party RSS manager account. I subscribed engineering blogs from major tech companies so that I can get latest technology trend update from major tech companies.
Sequel Pro: A database management tool that helped manage MySQL databases with a graphical interface.
ShadowsocksX-NG: A Shadowsocks client. It helps me to get access to some apps that were blocked (e.g. Google in China).
Typora: A markdown editor that render as you type. You don't need to look at raw text on the left and rendered on the right anymore.

Mac Terminal

Terminal is probably one of the most-used apps for software engineers. Check out Ultimate way to beautify Mac terminal (oh-my-zsh) and plugin recommendations for a complete guide to improving your terminal workflow.

VS Code Extensions

One reason I choose VS Code as my preferred code editor is its rich extensions marketplace. Here is a list of VS Code extensions I use:

👇

Atom One Dark Theme: A theme based on Atom's One Dark theme.
Beautify: Beautify Javascript, JSON, CSS, Sass, and HTML in Visual Studio Code.
Code Spell Checker: A basic spell checker that helps catch common spelling errors.
Copy without formatting: Prevent background/font format being pasted
ESLint: An essential tool that helps me write clean JavaScript code.
Prettier - Code formatter: Format your Javascript/TypeScript/CSS code
Rainbow CSV: Highlight CSV columns
TODO Highlight: Highlight TODO, FIXME in code

iOS Apps

👇

Slack: Same as on macOS, used just for quickly read and respond to messages.
PPHub: A third-party GitHub mobile client. You can view trending projects/developers and updates from your following account.
Eudic: A simple dictionary that has little to no ads.
Google: Google anything you want to know.
Scanbot: A free scanner app that has great user experience

Chrome Extensions

👇

Grammarly: Fixes grammar issues for me. Really helpful when writing emails or documentations.
Save Page WE: When I use Save Page As feature provided by Chrome, it actually exported html with lots of assets files. This extension actually exported as a single HTML file, which makes it easier to share.
Awesome Screenshot: Take screenshot from web pages
JSONView: Format JSON response in a more readable format
BuiltWith: Tells you what technology the current website uses

Cloud-based Service

👇

IFTTT (If This Then That): Set up automation between apps and services. I use it to automate the smart lights at home when I arrive or leave.
GitHub: GitHub is a community all developers love. I use GitHub to manage my code, knowledge, projects, and static websites. I also discover and contribute to interesting open-source projects. Check out My Second Brain Setup for how I use it to manage my knowledge and projects.
Firebase: Firebase gives you lots of out-of-the-box cloud solution for free, for example, real time database, cloud storage, cloud functions, and hosting. It makes it almost 0 cost to spin up a demo app.
Heroku: Heroku is a cloud platform to deploy apps. It is free for experimental use. I use it to deploy Node.js app where free static hosting services like Github Pages or Firebase Hosting can't support.
Google Cloud, Amazon Web Services (AWS), Microsoft Azure: These are major cloud computing service provider, some services are even free for developers to get started with. For example, Google Cloud - Always Free, AWS - Always Free, Azure - Free Account.
JSFiddle: An online HTML/JS/CSS editor, where you can test and run your code. I use it to test and share JS/HTML/CSS code snippet.
Travis CI, Circle CI: Continuous integration services used to build and test software projects hosted at GitHub. I use them to build and deploy static websites hosted on GitHub.

Embed Google Analytics Dashboard on Website with Server Side Authorization

Mon, 15 Oct 2018 00:00:00 GMT

This integration no longer works. It uses the Universal Analytics Embed API and ga: views, not Google Analytics 4. Universal Analytics was discontinued, so this example is not GA4-compatible and should not be used for a new integration.

If you use Google Analytics to analyze site traffic, you may want to embed its dashboards in your website. Google does not provide a simple iframe solution, but it does offer a Google Analytics Embed API that requires a little more technical knowledge. This article records the implementation steps.

Preview:

1. Create project in Google Developers Console

(Ignore this step if you already have Google Developers Project)

2. Create service account and download `.json` key file

3. Enable Google Analytics API

4. Grant service account to access Analytics account

Obtain service account email address

Add as read only user in Analytics account user management

5. Generate access token in server

We are using service account to generate access token in server to avoid user login process.

Node.js Server Implementation (Part)

Install Google API Client Library

npm install --save googleapis

Import service account key

let privateKey = require("./google_key.json");

Return Google access token to client

// https://your-domain/accessTokens will return access tokens such as google access tokens
app.get("/accessTokens", (req, res) => {
  let { google } = require("googleapis");
  let privateKey = require("./google_key.json");

  // configure a JWT auth client
  let jwtClient = new google.auth.JWT(
    privateKey.client_email,
    null,
    privateKey.private_key,
    "https://www.googleapis.com/auth/analytics.readonly",
  );

  jwtClient.authorize(function (err, token) {
    if (err) {
      console.log(err);
      return res.status(500).send("Error");
    } else {
      return res.send(token.access_token);
    }
  });
});

Python Server Implementation (Part)

Install Google API Client Library

sudo pip install --upgrade google-api-python-client

Return Google access token to client

# service-account.py

from oauth2client.service_account import ServiceAccountCredentials

# The scope for the OAuth2 request.
SCOPE = 'https://www.googleapis.com/auth/analytics.readonly'

# The location of the key file with the key data.
KEY_FILEPATH = 'path/to/json-key.json'

# Defines a method to get an access token from the ServiceAccount object.
def get_access_token():
  return ServiceAccountCredentials.from_json_keyfile_name(
      KEY_FILEPATH, SCOPE).get_access_token().access_token

6. Load Google Analytics Embed API library

<script>
  (function (w, d, s, g, js, fs) {
    g = w.gapi || (w.gapi = {});
    g.analytics = {
      q: [],
      ready: function (f) {
        this.q.push(f);
      },
    };
    js = d.createElement(s);
    fs = d.getElementsByTagName(s)[0];
    js.src = "https://apis.google.com/js/platform.js";
    fs.parentNode.insertBefore(js, fs);
    js.onload = function () {
      g.load("analytics");
    };
  })(window, document, "script");
</script>

7. Add dashboard containers

<div id="chart-1-container"></div>
<div id="chart-2-container"></div>

8. Fetch Google access token and load dashboards

<script>
  gapi.analytics.ready(function () {
    fetch("/api/accessTokens")
      .then(function (response) {
        return response.text();
      })
      .then(function (accessToken) {
        gapi.analytics.auth.authorize({
          serverAuth: {
            access_token: accessToken,
          },
        });
        dataChart1.execute();
        dataChart2.execute();
      });

    var dataChart1 = new gapi.analytics.googleCharts.DataChart({
      query: {
        ids: "ga:00000000", // <-- Replace with the ids value for your view.
        "start-date": "90daysAgo",
        "end-date": "today",
        metrics: "ga:sessions,ga:users",
        dimensions: "ga:date",
      },
      chart: {
        container: "chart-1-container",
        type: "LINE",
        options: {
          width: "100%",
        },
      },
    });

    var dataChart2 = new gapi.analytics.googleCharts.DataChart({
      query: {
        ids: "ga:00000000", // <-- Replace with the ids value for your view.
        "start-date": "90daysAgo",
        "end-date": "today",
        metrics:
          "ga:pageviews,ga:uniquePageviews,ga:timeOnPage,ga:bounces,ga:entrances,ga:exits",
        sort: "-ga:pageviews",
        dimensions: "ga:pagePath",
        "max-results": 10,
      },
      chart: {
        container: "chart-2-container",
        type: "PIE",
        options: {
          width: "100%",
          pieHole: 0.4,
        },
      },
    });
  });
</script>

References:

Why we need to deprecate x prefix for HTTP headers?

Wed, 01 Aug 2018 00:00:00 GMT

In June 2012, the Internet Engineering Task Force published RFC 6648, recommending that custom HTTP headers stop using the X- prefix. LinkedIn also used this convention, so I read the RFC and wanted to explain why the recommendation changed.

X- prefix background

HTTP header is used to transmit additional information between client and server.

Some standard HTTP header:

Authorization: Often used to transmit OAuth access token or other authorization information. e.g. Authorization: Bearer ABCDEFG
Content-Type: Often used to represent media type in request body. e.g. application/x-www-form-urlencoded or application/json)
User-Agent: Browser identifier. e.g. Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.84 Safari/537.36

If people want to have custom header, X- prefix is suggested to avoid conflict. This recommendation is raised in 1982 for Email standard(RFC-822)，working fine for decades。

Usage of X- prefix

Among all non-standard HTTP headers, some become very popular:

X-Forwarded-For: Mark origin IP of client connecting to server through proxy
X-Forwarded-Host: Mark origin host of client connecting to server through proxy
X-Forwarded-Proto: Mark protocol of client connecting to server through proxy
X-Powered-By: Mark framework, technology, environment, etc.

X- prefix issues

When these X- prefix become more and more popular, it's tough to handle it when we need to standardize them. In theory, we should remove the X- prefix after standardize it, but it will apparently affect existing applications. To avoid backward-compatibility issues, we have to keep it. In summary, the X- prefix can't identify between standard and non-standard headers anymore.

Solutions

No longer recommend X- for new custom headers, and no longer use X- prefix to distinguish standard and non-standard headers
If it's possible for new custom header to be standardized, use a non-used and meaningful header name
If it's not possible for new custom header to be standardized, include organization name (e.g. reverse domain name com.example.foo)
No recommendation to keep/drop for existing custom HTTP headers
X- prefix can't be used to assume safety of headers

Ultimate way to beautify Mac terminal (oh-my-zsh) and plugin recommendations

Thu, 26 Jul 2018 00:00:00 GMT

Historical note: this guide reflects a 2018 macOS setup. The commands, default paths, and plugin URLs may have changed; verify them against the current project documentation.

If you use a Mac for development, Terminal is probably one of your most frequently used apps. This guide shows how I improved it with a custom profile, Oh My Zsh, a theme, and a small set of plugins.

We will be doing these for our Terminal

Install Terminal Profile: Customize Terminal Color
Install oh-my-zsh: Use the powerful zsh shell in Terminal
Install oh-my-zsh themes: Beautify oh-my-zsh
Install useful oh-my-zsh plugins: Add shortcuts and quality-of-life improvements

Preparation

Recommend to install homebrew first:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Install zsh if you are on macOS version prior to Catalina:

# Install zsh
brew install zsh
# Set zsh as your default shell
chsh -s /usr/local/bin/zsh

Install Terminal Profile

Go to osx-terminal-theme and download your favorite theme in scheme folder
Double click the theme file to install and set as default

Feel free to use my Terminal Profile if you would like to try: https://gist.github.com/tonyxu-io/6b845cb1a53622eb4f1ce4063365e427

Install oh-my-zsh

Oh My Zsh is a delightful, open source, community-driven framework for managing your Zsh configuration. It comes bundled with thousands of helpful functions, helpers, plugins, themes, and a few things that make you shout...

Install oh-my-zsh:

sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Install oh-my-zsh theme

Built-in themes

oh-my-zsh provides some built-in themes which you can immediately use:

Find your favorite theme in built-in themes list: https://github.com/robbyrussell/oh-my-zsh/wiki/Themes
Set ZSH_THEME to your favorite theme name in ~/.zshrc
Activate setting by source ~/.zshrc

Third-party themes

There are more third-party themes developed for oh-my-zsh; find and install them here:

https://github.com/robbyrussell/oh-my-zsh/wiki/External-themes

Install oh-my-zsh must-have plugins

oh-my-zsh has many powerful plugins, below are some must-have plugins that will boost your productivity.

Sample config:

# ~/.zshrc:
plugins=(
  git
  extract
  autojump
  zsh-autosuggestions
  zsh-syntax-highlighting
)

git

Built-in，use abbreviations for git commands, e.g. gaa -> git add --all, use alias | grep git to get all abbreviations commands

Activate: Add git to ~/.zshrc plugins list.

extract

Built-in, no need to use complicated tar to extract zip files

Activate: Add extract to the ~/.zshrc plugins list.

Usage: extract file_name

autojump

Use j to quickly jump to a folder, e.g. j Downloads -> cd ~/Downloads

Install: brew install autojump

Activate: Add autojump to ~/.zshrc plugins list.

zsh-syntax-highlighting

Commands syntax highlight plugin

Install: git clone https://github.com/zsh-users/zsh-syntax-highlighting ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

Activate: Add zsh-syntax-highlighting to ~/.zshrc plugins list.

zsh-autosuggestions

Auto complete commands by typing →

Install: git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

Activate: Add zsh-autosuggestions to the ~/.zshrc plugins list.

My own ~/.zshrc config

# Path to your oh-my-zsh installation.
export ZSH=/Users/tonxu/.oh-my-zsh

# theme
ZSH_THEME="robbyrussell"

# plugins
plugins=(
  git
  extract
  autojump
  zsh-autosuggestions
  zsh-syntax-highlighting
)

source $ZSH/oh-my-zsh.sh

# set language
export LANG=en_US.UTF-8

# default editor
export EDITOR='vi'

# ssh key path
export SSH_KEY_PATH="~/.ssh/rsa_id"

OAuth 2.0 Authorization Code Flow with PKCE for Native Apps

Tue, 24 Jul 2018 00:00:00 GMT

The original insecure random verifier has been replaced with crypto.getRandomValues and Web Crypto SHA-256. Provider details can still change, so verify current OAuth and PKCE documentation before using the examples.

If you are building a native application and need OAuth 2.0, PKCE is the recommended authorization-code flow for public clients. This article explains why.

Native application is often used to refer to native application that has no back-end, and running totally in user's devices such as Windows, Mac, iOS, and Android, where securely storing secrets is impossible.

What are the OAuth 2 options for those native applications and what are the pros and cons for them?

Implicit Flow: Implicit flow will pass Access Token to Redirect URL。Assume your native application is redirecting to third-party browsers to perform OAuth2 authorization request, then your application either obtain the Access Token back by listening to app-name://?access_token= request or start a HTTP server to listen to http://localhost:{port}/?access_token= request. These two approaches both have the risk of Access Token being intercepted by malicious party who occupy URL Scheme or localhost port. Also access token can't be renewed after expiration. Thus implicit flow is not recommended.
Authorization Code Flow: Access Token of this flow will not be passed to Redirect URL directly. Redirect URL will only receive an authorization code，which need to be used along with Client ID，and Client Secret to exchange for Access Token. Since native application can't securely store Client Secret, malicious party can decode it from native code/binary, and intercept Authorization Code to exchange for Access Token. Thus authorization code flow is not recommended either. Even some OAuth provider doesn't require Client Secret, Access Token can still be exchanged by malicious party.

Now that two options are excluded, how can native application securely implement OAuth2? The answer is PKCE OAuth 2.0.

PKCE (Proof Key for Code Exchange), is using cryptography method to prevent malicious party to be able to exchange access token with the information they can intercept.

PKCE flow steps:

Generate random string and encode with URL-Safe Base64, and used as code_verifier
Do SHA256 hash，and URL-Safe Base64，and used as code_challenge
Redirect to OAuth provider with code_challenge and receive Authorization Code
Exchange for Access Token with code_verifier

Since malicious party can't infer code_verifier by code_challenge, only the native application itself knows about the two value. In this way, even if malicious party intercepted code_challenge, it will not be able to exchange Access Token.

Generate PKCE Code Verifier and Code Challenge Online

Use the compact PKCE code verifier and challenge generator to create a verifier and its S256 challenge locally in your browser.

Implementation (JavaScript)

<!doctype html>
<html>
  <head>
    <script>
      function base64URL(bytes) {
        var binary = "";
        bytes.forEach(function (byte) {
          binary += String.fromCharCode(byte);
        });
        return btoa(binary)
          .replace(/=/g, "")
          .replace(/\+/g, "-")
          .replace(/\//g, "_");
      }
      function generateCodeVerifier() {
        var randomBytes = new Uint8Array(32);
        crypto.getRandomValues(randomBytes);
        var code_verifier = base64URL(randomBytes);
        document.getElementById("code_verifier").value = code_verifier;
      }
      async function generateCodeChallenge(code_verifier) {
        var data = new TextEncoder().encode(code_verifier);
        var digest = await crypto.subtle.digest("SHA-256", data);
        return base64URL(new Uint8Array(digest));
      }
      async function submit() {
        var code_verifier = document.getElementById("code_verifier").value;
        var code_challenge = await generateCodeChallenge(code_verifier);
        document.getElementById("code_challenge").textContent = code_challenge;
        document.getElementById("code_challenge_div").style.display = "block";
      }
    </script>
  </head>

  <body>
    <div>
      <label for="code_verifier">Code Verifier: </label>
      <input type="text" id="code_verifier" name="code_verifier" size="50" />
    </div>
    <br />
    <div style="display:none" id="code_challenge_div">
      Code Challenge:
      <span id="code_challenge"> </span>
    </div>
    <br />
    <div>
      <button onclick="generateCodeVerifier()">Generate Code Verifier</button>
      <button onclick="submit()">Generate Code Challenge</button>
    </div>
  </body>
</html>

OAuth2 providers that support PKCE

Reference: