Skip to content

Commit

Permalink
Support Organization Name (#242)
Browse files Browse the repository at this point in the history
  • Loading branch information
frederikprijck authored Jul 24, 2023
1 parent 2a7cb28 commit 27f1338
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 23 deletions.
32 changes: 17 additions & 15 deletions EXAMPLES.md
Original file line number Diff line number Diff line change
Expand Up @@ -474,6 +474,7 @@ app.mount('#app');
Doing the above ensures every guard is connected to the Auth0Plugin that's configured in the same Vue application.

## Accessing Auth0Client outside of a component

To be able to access `Auth0Client` outside of the component, there are a couple of things you need to do.

First of all, start with moving the creation of the plugin to an external file:
Expand All @@ -483,22 +484,23 @@ export const auth0 = createAuth0({ ... });
```

Next, you can import the exported plugin instance when configuring the Vue app.

```ts
import { auth0 } from './auth0';

createApp(App)
.use(auth0)
.mount('#app');
createApp(App).use(auth0).mount('#app');
```

However, you can now also import the exported plugin instance anywhere else and access it's methods

```ts
import { auth0 } from './auth0'
import { auth0 } from './auth0';

export async function getAccessTokenSilentlyOutsideComponent(options) {
return auth0.getAccessTokenSilently(options);
}
```

This would allow you to interact with our SDK from outside of components, such as Axios interceptors.

**Note**: Be aware that none of the above is specific to our SDK, but would translate to any plugin in Vue.
Expand All @@ -520,7 +522,7 @@ app.use(
clientId: '<AUTH0_CLIENT_ID>',
authorizationParams: {
redirect_uri: '<MY_CALLBACK_URL>',
organization: 'YOUR_ORGANIZATION_ID'
organization: 'YOUR_ORGANIZATION_ID_OR_NAME'
}
})
);
Expand All @@ -539,16 +541,16 @@ You can also specify the organization when logging in:
return {
login: () => {
// Using a redirect
loginWithRedirect({
authorizationParams: {
organization: 'YOUR_ORGANIZATION_ID',
loginWithRedirect({
authorizationParams: {
organization: 'YOUR_ORGANIZATION_ID_OR_NAME',
}
});

// Using a popup window
loginWithPopup({
authorizationParams: {
organization: 'YOUR_ORGANIZATION_ID',
loginWithPopup({
authorizationParams: {
organization: 'YOUR_ORGANIZATION_ID_OR_NAME',
}
})
}
Expand All @@ -575,16 +577,16 @@ Accept a user invitation through the SDK by creating a route within your applica
return {
login: () => {
// Using a redirect
loginWithRedirect({
authorizationParams: {
loginWithRedirect({
authorizationParams: {
organization,
invitation,
}
});

// Using a popup window
loginWithPopup({
authorizationParams: {
loginWithPopup({
authorizationParams: {
organization,
invitation,
}
Expand Down
14 changes: 7 additions & 7 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@
"wait-on": "^6.0.0"
},
"dependencies": {
"@auth0/auth0-spa-js": "^2.0.4",
"@auth0/auth0-spa-js": "^2.1.1",
"vue": "^3.2.41"
},
"peerDependencies": {
Expand Down

0 comments on commit 27f1338

Please sign in to comment.