1.1.0 • Published 4 months ago
simple-oauth-redirect v1.1.0
Simple OAuth Redirect
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-redirectHow to use in Node
Import 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);
});How to use in browser
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>