A simple package for navigating to an OAuth endpoint, receiving the callback, and returning the callback URL all in one async function.
Supports both Node and browsers, both ESM and CommonJS, and TypeScript.
npm i simple-oauth-redirectImport the Node implementation with simple-oauth-redirect/node. The function will create a simple http server that binds to the callback URL for the duration of the promise.
const SimpleOAuth = require('simple-oauth-redirect/node');
// import { redirect } from "simple-oauth-redirect/node";
const callbackUrl = 'http://localhost:8000/callback';
const targetUrl = `http://example.com/oauth?redirect_uri=${encodeURIComponent(callbackUrl)}`;
SimpleOAuth.redirect(targetUrl, callbackUrl).then((url) => {
console.log('OAuth callback url with codes:', url);
});Import the browser implementation with simple-oauth-redirect/web. The browser implementation also uses the Broadcast Channel API.
The callback page must call checkForCallback() for the redirect promise to return.
Example Svelte Implementation
index.svelte
<script lang="ts">
import { redirect } from 'simple-oauth-redirect/web';
let responseUrl: string;
async function authButton() {
const callbackUrl = `${window.location.origin}/callback`;
const targetUrl = `http://example.com/oauth?redirect_uri=${encodeURIComponent(callbackUrl)}`;
const res = await redirect(targetUrl, callbackUrl);
responseUrl = res.href;
}
</script>
{#if !responseUrl}
<button on:click={() => authButton()}>Authorize</button>
{:else}
<h1>Received URL:</h1>
<p>{responseUrl}</p>
{/if}callback.svelte
<script>
import { onMount } from 'svelte';
import { checkForCallback } from 'simple-oauth-redirect/web';
onMount(() => {
checkForCallback();
});
</script>Example Vanilla HTML Implementation
index.html
<html lang="en">
<script type="module">
import { redirect } from 'https://cdn.skypack.dev/simple-oauth-redirect/web';
document.getElementById('auth-button').addEventListener('click', () => {
const callbackUrl = `${window.location.origin}/callback.html`;
const targetUrl = `http://example.com/oauth?redirect_uri=${encodeURIComponent(callbackUrl)}`;
redirect(targetUrl, callbackUrl).then((url) => {
alert('OAuth callback url with codes: ' + url);
console.log('OAuth callback url with codes:', url);
});
});
</script>
<body>
<button id="auth-button">Authorize</button>
</body>
</html>callback.html
<html lang="en">
<script type="module">
import { checkForCallback } from 'https://cdn.skypack.dev/simple-oauth-redirect/web';
checkForCallback();
</script>
</html>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent