Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[SDK-1379] Export constructor #385

Merged
merged 3 commits into from
Mar 26, 2020
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,22 @@ createAuth0Client({
}).then(auth0 => {
//...
});

//or, you can just instantiate the client on it's own
import { Auth0Client } from '@auth0/auth0-spa-js';
const auth0 = new Auth0Client({
domain: '<AUTH0_DOMAIN>',
client_id: '<AUTH0_CLIENT_ID>',
redirect_uri: '<MY_CALLBACK_URL>'
});
//if you do this, you'll need to check the session yourself
try {
await getTokenSilently();
} catch (error) {
if (error.error !== 'login_required') {
throw error;
}
}
```

### 1 - Login
Expand Down
14 changes: 6 additions & 8 deletions __tests__/index.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@ jest.mock('../src/transaction-manager');
jest.mock('../src/utils');

import { CacheLocation } from '../src/global';
import Auth0Client from '../src/Auth0Client';

import createAuth0Client, { GetTokenSilentlyOptions } from '../src/index';
import createAuth0Client, {
Auth0Client,
GetTokenSilentlyOptions
} from '../src/index';

import { AuthenticationError } from '../src/errors';
import version from '../src/version';
Expand Down Expand Up @@ -351,9 +353,7 @@ describe('Auth0', () => {
it('opens popup with correct popup, url and custom config', async () => {
const { auth0, utils } = await setup();
await auth0.loginWithPopup({}, { timeoutInSeconds: 1 });
expect(
utils.runPopup
).toHaveBeenCalledWith(
expect(utils.runPopup).toHaveBeenCalledWith(
`https://test.auth0.com/authorize?${TEST_QUERY_PARAMS}${TEST_TELEMETRY_QUERY_STRING}`,
{ timeoutInSeconds: 1 }
);
Expand All @@ -369,9 +369,7 @@ describe('Auth0', () => {
}
);

expect(
utils.runPopup
).toHaveBeenCalledWith(
expect(utils.runPopup).toHaveBeenCalledWith(
`https://test.auth0.com/authorize?${TEST_QUERY_PARAMS}${TEST_TELEMETRY_QUERY_STRING}`,
{ timeoutInSeconds: 25 }
);
Expand Down
19 changes: 19 additions & 0 deletions cypress/integration/initialisation.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { whenReady } from '../support/utils';

describe('initialisation', function() {
beforeEach(cy.resetTests);

it('should expose a factory method and constructor', function(done) {
whenReady().then(win => {
assert.isFunction(
win.createAuth0Client,
'The createAuth0Client function should be declared on the window.'
);
assert.isFunction(
win.Auth0Client,
'The Auth0Client constructor should be declared on the window.'
);
done();
});
});
});
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@
"version": "1.7.0-beta.4",
"main": "dist/lib/auth0-spa-js.cjs.js",
"types": "dist/typings/index.d.ts",
"browser": "dist/auth0-spa-js.production.js",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this removed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Webpack resolves the library by checking the package properties in this order: "browser" -> "module" -> "main"

This is designed so that if you have a library that provides a different flavour for nodejs and the browser (like axios)

We only have one flavour, browser, but we do want to provide an optimized es module version to webpack (or any build tool that prefers es modules). So if we delete "browser" webpack will use module and get the benefits of esm (tree shaking, named exports), things that use commonjs (like browserify) will use "main"

"module": "dist/auth0-spa-js.production.esm.js",
"scripts": {
"dev": "rimraf dist && rollup -c --watch",
Expand Down
12 changes: 8 additions & 4 deletions rollup.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,16 @@ const getPlugins = shouldMinify => {
sourcemaps()
];
};
const footer = `('Auth0Client' in this) && this.console && this.console.warn && this.console.warn('Auth0Client already declared on the global namespace');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't understand the changes to this file in context of the PR description - should this be something separate?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This exposes the constructor on the window object (as window.Auth0Client)

Similar to how Marionette provides the alias window.Mn https://github.com/marionettejs/backbone.marionette/blob/master/rollup.config.js#L28

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe the idea here is to provide a warning in the browser console when there is already an Auth0Client symbol defined on the window object, as including our library would then try to override it.

@adamjmcgrath can you remind me of the behaviour here? Does it override it, or do we not override it in favour of the object that was already there?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It doesn't override Auth0Client if that property already exists on the window, it'll raise a warning if this is the case.

this && this.${EXPORT_NAME} && (this.Auth0Client = this.Auth0Client || this.${EXPORT_NAME}.Auth0Client);`;

let bundles = [
{
input: 'src/index.ts',
input: 'src/index.cjs.ts',
output: {
name: EXPORT_NAME,
file: 'dist/auth0-spa-js.development.js',
footer,
format: 'umd'
},
plugins: [
Expand All @@ -62,11 +65,12 @@ let bundles = [
if (isProduction) {
bundles = bundles.concat(
{
input: 'src/index.ts',
input: 'src/index.cjs.ts',
output: [
{
name: EXPORT_NAME,
file: pkg.browser,
file: 'dist/auth0-spa-js.production.js',
footer,
format: 'umd'
}
],
Expand All @@ -86,7 +90,7 @@ if (isProduction) {
plugins: getPlugins(isProduction)
},
{
input: 'src/index.ts',
input: 'src/index.cjs.ts',
output: [
{
name: EXPORT_NAME,
Expand Down
4 changes: 3 additions & 1 deletion src/Auth0Client.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ import {
runIframe,
sha256,
bufferToBase64UrlEncoded,
oauthToken
oauthToken,
validateCrypto
} from './utils';

import { InMemoryCache, ICache, LocalStorageCache } from './cache';
Expand Down Expand Up @@ -79,6 +80,7 @@ export default class Auth0Client {
cacheLocation: CacheLocation;

constructor(private options: Auth0ClientOptions) {
validateCrypto();
this.cacheLocation = options.cacheLocation || 'memory';

if (!cacheFactory(this.cacheLocation)) {
Expand Down
6 changes: 6 additions & 0 deletions src/index.cjs.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import createAuth0Client, { Auth0Client } from './index';

export default Object.assign(createAuth0Client, {
Auth0Client,
createAuth0Client
});
9 changes: 3 additions & 6 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,22 @@ import 'promise-polyfill/src/polyfill';
import 'fast-text-encoding';
import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';

import Auth0Client_ from './Auth0Client';
import Auth0Client from './Auth0Client';
import * as ClientStorage from './storage';
import { Auth0ClientOptions } from './global';
import { CACHE_LOCATION_MEMORY } from './constants';

import './global';
import { validateCrypto } from './utils';
import { getUniqueScopes } from './utils';

export * from './global';

export default async function createAuth0Client(options: Auth0ClientOptions) {
validateCrypto();

if (options.useRefreshTokens) {
options.scope = getUniqueScopes(options.scope, 'offline_access');
}

const auth0 = new Auth0Client_(options);
const auth0 = new Auth0Client(options);

if (
auth0.cacheLocation === CACHE_LOCATION_MEMORY &&
Expand All @@ -45,4 +42,4 @@ export default async function createAuth0Client(options: Auth0ClientOptions) {
return auth0;
}

export type Auth0Client = Auth0Client_;
export { Auth0Client };