d2l-fetch-auth

1.9.1 verified Sat Apr 25 auth: no javascript

Middleware function for wrapping a window.Request object with Brightspace (D2L) authentication for use with d2l-fetch. Current stable version is 1.9.1. This package is specifically designed for D2L/Brightspace ecosystems, providing seamless integration with their authentication system for fetch requests. It offers two variants: a standard auth middleware and a framed version for iFramed Free Range Applications (iFRA). Release cadence follows semantic-release, triggered by `fix:` and `feat:` prefixed commits. Key differentiators: handles D2L-specific auth tokens and headers, works with both top-level and iframed contexts.

Common errors

error Uncaught SyntaxError: The requested module 'd2l-fetch-auth/d2l-fetch-auth.js' does not provide an export named 'auth' ↓

cause Trying named import `{ auth }` instead of default import.

fix

Use import auth from 'd2l-fetch-auth/d2l-fetch-auth.js';

error Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html" ↓

cause Import path point to a directory instead of the .js file, or the server is misconfigured.

fix

Use the full path ending with '.js': import auth from 'd2l-fetch-auth/d2l-fetch-auth.js';

error TypeError: Cannot read properties of undefined (reading 'use') ↓

cause d2l-fetch is not imported or initialized before calling `d2lfetch.use`.

fix

Import d2l-fetch first: import d2lfetch from 'd2l-fetch';

error 401 Unauthorized when making requests with d2l-fetch ↓

cause Auth middleware not installed or using wrong variant (non-framed vs framed).

fix

Call d2lfetch.use({name: 'auth', fn: auth}); after importing the correct auth middleware for your context.

Warnings

gotcha Using wrong import path for iframed vs non-iframed context will cause authentication failures in iFRAs. ↓

fix If your app runs in an iframe, use `'d2l-fetch-auth/d2l-fetch-auth-framed.js'`.

gotcha The auth middleware must be used via `d2lfetch.use()`; importing alone does not activate it. ↓

fix Call `d2lfetch.use({name: 'auth', fn: auth})` after importing.

deprecated Older versions may not support ES module imports; check your d2l-fetch version compatibility. ↓

fix Upgrade to version 1.0.0 or later.

gotcha If d2l-fetch is not initialized or loaded, the middleware will not function. ↓

fix Ensure d2l-fetch is installed and imported before using d2l-fetch-auth.

breaking Version 1.0.0 changed the import path from legacy scripts to ES modules. Old script tags may break. ↓

fix Update HTML script tags to use `type="module"` and the new import paths.

Install

npm install d2l-fetch-auth

yarn add d2l-fetch-auth

pnpm add d2l-fetch-auth

Imports

auth (default)
wrong
```
import { auth } from 'd2l-fetch-auth';
```
correct
```
import auth from 'd2l-fetch-auth/d2l-fetch-auth.js';
```
The module exports a default function. Named import will fail. For iFRAs, use 'd2l-fetch-auth/d2l-fetch-auth-framed.js'.

auth (default) for iFRA

wrong

import auth from 'd2l-fetch-auth/d2l-fetch-auth.js';

correct

import auth from 'd2l-fetch-auth/d2l-fetch-auth-framed.js';

If your app runs in an iframed context (iFRA), you must use the framed version.

auth (CommonJS)
```
const auth = require('d2l-fetch-auth/d2l-fetch-auth.js');
```
CommonJS require is available for older environments; but ESM is recommended.

Quickstart

Shows how to import and use the auth middleware with d2l-fetch to make authenticated requests.

// Ensure d2l-fetch is loaded first
import d2lfetch from 'd2l-fetch';
import auth from 'd2l-fetch-auth/d2l-fetch-auth.js';

d2lfetch.use({name: 'auth', fn: auth});

const response = await d2lfetch.fetch(
	new Request('https://api.example.com/entity/1')
);

const data = await response.json();
console.log(data);