-
Notifications
You must be signed in to change notification settings - Fork 21
/
index.html
197 lines (183 loc) · 28.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>@auth0/auth0-vue</title><meta name="description" content="Documentation for @auth0/auth0-vue"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script async src="assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
<div class="tsd-toolbar-contents container">
<div class="table-cell" id="tsd-search" data-base=".">
<div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
<div class="field">
<div id="tsd-toolbar-links"></div></div>
<ul class="results">
<li class="state loading">Preparing search index...</li>
<li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">@auth0/auth0-vue</a></div>
<div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
<div class="container container-main">
<div class="col-8 col-content">
<div class="tsd-page-title">
<h2>@auth0/auth0-vue</h2></div>
<div class="tsd-panel tsd-typography"><p><img src="https://cdn.auth0.com/website/sdks/banners/auth0-vue-banner.png" alt="Auth0 SDK for Vue 3 Single Page Applications"></p>
<p><img src="https://img.shields.io/npm/v/@auth0/auth0-vue" alt="Release">
<a href="https://codecov.io/gh/auth0/auth0-vue"><img src="https://codecov.io/gh/auth0/auth0-vue/branch/main/graph/badge.svg" alt="Codecov"></a>
<img src="https://img.shields.io/npm/dw/@auth0/auth0-vue" alt="Downloads">
<a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/:license-mit-blue.svg?style=flat" alt="License"></a>
<a href="https://circleci.com/gh/auth0/auth0-vue"><img src="https://img.shields.io/circleci/build/github/auth0/auth0-vue" alt="CircleCI"></a></p>
<p>📚 <a href="#documentation">Documentation</a> - 🚀 <a href="#getting-started">Getting Started</a> - 💻 <a href="#api-reference">API Reference</a> - 💬 <a href="#feedback">Feedback</a></p>
<a href="#documentation" id="documentation" style="color: inherit; text-decoration: none;">
<h2>Documentation</h2>
</a>
<ul>
<li><a href="https://auth0.com/docs/quickstart/spa/vuejs">Quickstart</a> - our interactive guide for quickly adding login, logout and user information to a Vue 3 app using Auth0.</li>
<li><a href="https://github.com/auth0-samples/auth0-vue-samples/tree/master/01-Login">Sample App</a> - a full-fledged Vue 3 application integrated with Auth0.</li>
<li><a href="https://github.com/auth0/auth0-vue/tree/main/FAQ.md">FAQs</a> - frequently asked questions about the auth0-vue SDK.</li>
<li><a href="https://github.com/auth0/auth0-vue/tree/main/EXAMPLES.md">Examples</a> - code samples for common Vue 3 authentication scenario's.</li>
<li><a href="https://www.auth0.com/docs">Docs site</a> - explore our docs site and learn more about Auth0.</li>
</ul>
<a href="#getting-started" id="getting-started" style="color: inherit; text-decoration: none;">
<h2>Getting started</h2>
</a>
<a href="#requirements" id="requirements" style="color: inherit; text-decoration: none;">
<h3>Requirements</h3>
</a>
<p>This library supports <strong>Vue 3</strong> applications.
For integrating Auth0 with a Vue 2 application, please read <a href="https://github.com/auth0/auth0-vue/blob/main/tutorial/vue2-login.md">the Vue 2 Tutorial</a>.</p>
<a href="#installation" id="installation" style="color: inherit; text-decoration: none;">
<h3>Installation</h3>
</a>
<p>Using <a href="https://npmjs.org">npm</a>:</p>
<pre><code class="language-sh"><span class="hl-0">npm install @auth0/auth0-vue</span>
</code></pre>
<p>Using <a href="https://yarnpkg.com">yarn</a>:</p>
<pre><code class="language-sh"><span class="hl-0">yarn add @auth0/auth0-vue</span>
</code></pre>
<a href="#configure-auth0" id="configure-auth0" style="color: inherit; text-decoration: none;">
<h3>Configure Auth0</h3>
</a>
<p>Create a <strong>Single Page Application</strong> in the <a href="https://manage.auth0.com/#/applications">Auth0 Dashboard</a>.</p>
<blockquote>
<p><strong>If you're using an existing application</strong>, verify that you have configured the following settings in your Single Page Application:</p>
<ul>
<li>Click on the "Settings" tab of your application's page.</li>
<li>Scroll down and click on the "Show Advanced Settings" link.</li>
<li>Under "Advanced Settings", click on the "OAuth" tab.</li>
<li>Ensure that "JsonWebToken Signature Algorithm" is set to <code>RS256</code> and that "OIDC Conformant" is enabled.</li>
</ul>
</blockquote>
<p>Next, configure the following URLs for your application under the "Application URIs" section of the "Settings" page:</p>
<ul>
<li><strong>Allowed Callback URLs</strong>: <code>http://localhost:3000</code></li>
<li><strong>Allowed Logout URLs</strong>: <code>http://localhost:3000</code></li>
<li><strong>Allowed Web Origins</strong>: <code>http://localhost:3000</code></li>
</ul>
<blockquote>
<p>These URLs should reflect the origins that your application is running on. <strong>Allowed Callback URLs</strong> may also include a path, depending on where you're handling the callback (see below).</p>
</blockquote>
<p>Take note of the <strong>Client ID</strong> and <strong>Domain</strong> values under the "Basic Information" section. You'll need these values in the next step.</p>
<a href="#configure-the-sdk" id="configure-the-sdk" style="color: inherit; text-decoration: none;">
<h3>Configure the SDK</h3>
</a>
<p>Create an instance of the <code>Auth0Plugin</code> by calling <code>createAuth0</code> and pass it to Vue's <code>app.use()</code>.</p>
<pre><code class="language-js"><span class="hl-1">import</span><span class="hl-0"> { </span><span class="hl-2">createAuth0</span><span class="hl-0"> } </span><span class="hl-1">from</span><span class="hl-0"> </span><span class="hl-3">'@auth0/auth0-vue'</span><span class="hl-0">;</span><br/><br/><span class="hl-4">const</span><span class="hl-0"> </span><span class="hl-5">app</span><span class="hl-0"> = </span><span class="hl-6">createApp</span><span class="hl-0">(</span><span class="hl-2">App</span><span class="hl-0">);</span><br/><br/><span class="hl-2">app</span><span class="hl-0">.</span><span class="hl-6">use</span><span class="hl-0">(</span><br/><span class="hl-0"> </span><span class="hl-6">createAuth0</span><span class="hl-0">({</span><br/><span class="hl-0"> </span><span class="hl-2">domain:</span><span class="hl-0"> </span><span class="hl-3">'<AUTH0_DOMAIN>'</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-2">clientId:</span><span class="hl-0"> </span><span class="hl-3">'<AUTH0_CLIENT_ID>'</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-2">authorizationParams:</span><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-2">redirect_uri:</span><span class="hl-0"> </span><span class="hl-3">'<MY_CALLBACK_URL>'</span><br/><span class="hl-0"> }</span><br/><span class="hl-0"> })</span><br/><span class="hl-0">);</span><br/><br/><span class="hl-2">app</span><span class="hl-0">.</span><span class="hl-6">mount</span><span class="hl-0">(</span><span class="hl-3">'#app'</span><span class="hl-0">);</span>
</code></pre>
<a href="#add-login-to-your-application" id="add-login-to-your-application" style="color: inherit; text-decoration: none;">
<h3>Add login to your application</h3>
</a>
<p>In order to add login to your application you can use the <code>loginWithRedirect</code> function that is exposed on the return value of <code>useAuth0</code>, which you can access in your component's <code>setup</code> function.</p>
<pre><code class="language-html"><span class="hl-7"><</span><span class="hl-8">script</span><span class="hl-7">></span><br/><span class="hl-9"> </span><span class="hl-1">import</span><span class="hl-9"> { </span><span class="hl-2">useAuth0</span><span class="hl-9"> } </span><span class="hl-1">from</span><span class="hl-9"> </span><span class="hl-3">'@auth0/auth0-vue'</span><span class="hl-9">;</span><br/><br/><span class="hl-9"> </span><span class="hl-1">export</span><span class="hl-9"> </span><span class="hl-1">default</span><span class="hl-9"> {</span><br/><span class="hl-9"> </span><span class="hl-6">setup</span><span class="hl-9">() {</span><br/><span class="hl-9"> </span><span class="hl-4">const</span><span class="hl-9"> { </span><span class="hl-5">loginWithRedirect</span><span class="hl-9"> } </span><span class="hl-0">=</span><span class="hl-9"> </span><span class="hl-6">useAuth0</span><span class="hl-9">();</span><br/><br/><span class="hl-9"> </span><span class="hl-1">return</span><span class="hl-9"> {</span><br/><span class="hl-9"> </span><span class="hl-6">login</span><span class="hl-2">:</span><span class="hl-9"> () </span><span class="hl-4">=></span><span class="hl-9"> {</span><br/><span class="hl-9"> </span><span class="hl-6">loginWithRedirect</span><span class="hl-9">();</span><br/><span class="hl-9"> }</span><br/><span class="hl-9"> };</span><br/><span class="hl-9"> }</span><br/><span class="hl-9"> };</span><br/><span class="hl-7"></</span><span class="hl-8">script</span><span class="hl-7">></span>
</code></pre>
<p>Once setup returns the correct method, you can call that method from your component's HTML.</p>
<pre><code class="language-html"><span class="hl-7"><</span><span class="hl-8">template</span><span class="hl-7">></span><br/><span class="hl-0"> </span><span class="hl-7"><</span><span class="hl-8">div</span><span class="hl-7">></span><br/><span class="hl-0"> </span><span class="hl-7"><</span><span class="hl-8">button</span><span class="hl-0"> </span><span class="hl-10">@click</span><span class="hl-0">=</span><span class="hl-11">"login"</span><span class="hl-7">></span><span class="hl-0">Log in</span><span class="hl-7"></</span><span class="hl-8">button</span><span class="hl-7">></span><br/><span class="hl-0"> </span><span class="hl-7"></</span><span class="hl-8">div</span><span class="hl-7">></span><br/><span class="hl-7"></</span><span class="hl-8">template</span><span class="hl-7">></span>
</code></pre>
<details>
<summary>Using Options API</summary>
<pre><code class="language-html"><span class="hl-7"><</span><span class="hl-8">template</span><span class="hl-7">></span><br/><span class="hl-0"> </span><span class="hl-7"><</span><span class="hl-8">div</span><span class="hl-7">></span><br/><span class="hl-0"> </span><span class="hl-7"><</span><span class="hl-8">button</span><span class="hl-0"> </span><span class="hl-10">@click</span><span class="hl-0">=</span><span class="hl-11">"login"</span><span class="hl-7">></span><span class="hl-0">Log in</span><span class="hl-7"></</span><span class="hl-8">button</span><span class="hl-7">></span><br/><span class="hl-0"> </span><span class="hl-7"></</span><span class="hl-8">div</span><span class="hl-7">></span><br/><span class="hl-7"></</span><span class="hl-8">template</span><span class="hl-7">></span><br/><br/><span class="hl-7"><</span><span class="hl-8">script</span><span class="hl-7">></span><br/><span class="hl-9"> </span><span class="hl-1">export</span><span class="hl-9"> </span><span class="hl-1">default</span><span class="hl-9"> {</span><br/><span class="hl-9"> </span><span class="hl-2">methods:</span><span class="hl-9"> {</span><br/><span class="hl-9"> </span><span class="hl-6">login</span><span class="hl-9">() {</span><br/><span class="hl-9"> </span><span class="hl-4">this</span><span class="hl-9">.</span><span class="hl-2">$auth0</span><span class="hl-9">.</span><span class="hl-6">loginWithRedirect</span><span class="hl-9">();</span><br/><span class="hl-9"> }</span><br/><span class="hl-9"> }</span><br/><span class="hl-9"> };</span><br/><span class="hl-7"></</span><span class="hl-8">script</span><span class="hl-7">></span>
</code></pre>
</details>
<p>For more code samples on how to integrate the <strong>auth0-vue</strong> SDK in your <strong>Vue 3</strong> application, have a look at our <a href="https://github.com/auth0/auth0-vue/tree/main/EXAMPLES.md">examples</a>.</p>
<a href="#api-reference" id="api-reference" style="color: inherit; text-decoration: none;">
<h2>API reference</h2>
</a>
<p>Explore public API's available in auth0-vue.</p>
<ul>
<li><a href="https://auth0.github.io/auth0-vue/functions/createAuth0.html">createAuth0</a></li>
<li><a href="https://auth0.github.io/auth0-vue/functions/createAuthGuard.html">createAuthGuard</a></li>
<li><a href="https://auth0.github.io/auth0-vue/functions/useAuth0.html">useAuth0</a></li>
<li><a href="https://auth0.github.io/auth0-vue/interfaces/Auth0PluginOptions.html">Auth0PluginOptions</a></li>
<li><a href="https://auth0.github.io/auth0-vue/interfaces/Auth0VueClientOptions.html">Auth0VueClientOptions</a></li>
<li><a href="https://auth0.github.io/auth0-vue/interfaces/Auth0VueClient.html">Auth0VueClient</a></li>
</ul>
<a href="#feedback" id="feedback" style="color: inherit; text-decoration: none;">
<h2>Feedback</h2>
</a>
<a href="#contributing" id="contributing" style="color: inherit; text-decoration: none;">
<h3>Contributing</h3>
</a>
<p>We appreciate feedback and contribution to this repo! Before you get started, please see the following:</p>
<ul>
<li><a href="https://github.com/auth0/open-source-template/blob/master/GENERAL-CONTRIBUTING.md">Auth0's general contribution guidelines</a></li>
<li><a href="https://github.com/auth0/open-source-template/blob/master/CODE-OF-CONDUCT.md">Auth0's code of conduct guidelines</a></li>
<li><a href="https://github.com/auth0/auth0-vue/blob/main/CONTRIBUTING.md">This repo's contribution guide</a></li>
</ul>
<a href="#raise-an-issue" id="raise-an-issue" style="color: inherit; text-decoration: none;">
<h3>Raise an issue</h3>
</a>
<p>To provide feedback or report a bug, please <a href="https://github.com/auth0/auth0-vue/issues">raise an issue on our issue tracker</a>.</p>
<a href="#vulnerability-reporting" id="vulnerability-reporting" style="color: inherit; text-decoration: none;">
<h3>Vulnerability Reporting</h3>
</a>
<p>Please do not report security vulnerabilities on the public GitHub issue tracker. The <a href="https://auth0.com/responsible-disclosure-policy">Responsible Disclosure Program</a> details the procedure for disclosing security issues.</p>
<hr>
<p align="center">
<picture>
<source media="(prefers-color-scheme: light)" srcset="https://cdn.auth0.com/website/sdks/logos/auth0_light_mode.png" width="150">
<source media="(prefers-color-scheme: dark)" srcset="https://cdn.auth0.com/website/sdks/logos//auth0_dark_mode.png" width="150">
<img alt="Auth0 Logo" src="https://cdn.auth0.com/website/sdks/logos/auth0_light_mode.png" width="150">
</picture>
</p>
<p align="center">Auth0 is an easy to implement, adaptable authentication and authorization platform. To learn more checkout <a href="https://auth0.com/why-auth0">Why Auth0?</a></p>
<p align="center">
This project is licensed under the MIT license. See the <a href="https://github.com/auth0/auth0-vue/blob/main/LICENSE"> LICENSE</a> file for more info.</p></div></div>
<div class="col-4 col-menu menu-sticky-wrap menu-highlight">
<div class="tsd-navigation settings">
<details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Settings</h3></summary>
<div class="tsd-accordion-details">
<div class="tsd-filter-visibility">
<h4 class="uppercase">Member Visibility</h4><form>
<ul id="tsd-filter-options">
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
<li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
<div class="tsd-theme-toggle">
<h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
<nav class="tsd-navigation primary">
<details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
<h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
<div class="tsd-accordion-details">
<ul>
<li class="current selected"><a href="modules.html">@auth0/auth0-<wbr/>vue</a>
<ul></ul></li></ul></div></details></nav>
<nav class="tsd-navigation secondary menu-sticky">
<ul>
<li class="tsd-kind-class tsd-is-external"><a href="classes/InMemoryCache.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-class)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-128-path"></rect><path d="M11.898 16.1201C11.098 16.1201 10.466 15.8961 10.002 15.4481C9.53803 15.0001 9.30603 14.3841 9.30603 13.6001V9.64012C9.30603 8.85612 9.53803 8.24012 10.002 7.79212C10.466 7.34412 11.098 7.12012 11.898 7.12012C12.682 7.12012 13.306 7.34812 13.77 7.80412C14.234 8.25212 14.466 8.86412 14.466 9.64012H13.386C13.386 9.14412 13.254 8.76412 12.99 8.50012C12.734 8.22812 12.37 8.09212 11.898 8.09212C11.426 8.09212 11.054 8.22412 10.782 8.48812C10.518 8.75212 10.386 9.13212 10.386 9.62812V13.6001C10.386 14.0961 10.518 14.4801 10.782 14.7521C11.054 15.0161 11.426 15.1481 11.898 15.1481C12.37 15.1481 12.734 15.0161 12.99 14.7521C13.254 14.4801 13.386 14.0961 13.386 13.6001H14.466C14.466 14.3761 14.234 14.9921 13.77 15.4481C13.306 15.8961 12.682 16.1201 11.898 16.1201Z" fill="var(--color-text)" id="icon-128-text"></path></svg>In<wbr/>Memory<wbr/>Cache</a></li>
<li class="tsd-kind-class tsd-is-external"><a href="classes/LocalStorageCache.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Local<wbr/>Storage<wbr/>Cache</a></li>
<li class="tsd-kind-class tsd-is-external"><a href="classes/User.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>User</a></li>
<li class="tsd-kind-interface"><a href="interfaces/AppState.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg>App<wbr/>State</a></li>
<li class="tsd-kind-interface"><a href="interfaces/Auth0PluginOptions.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>Auth0<wbr/>Plugin<wbr/>Options</a></li>
<li class="tsd-kind-interface"><a href="interfaces/Auth0VueClient.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>Auth0<wbr/>Vue<wbr/>Client</a></li>
<li class="tsd-kind-interface"><a href="interfaces/Auth0VueClientOptions.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>Auth0<wbr/>Vue<wbr/>Client<wbr/>Options</a></li>
<li class="tsd-kind-interface"><a href="interfaces/AuthGuardOptions.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>Auth<wbr/>Guard<wbr/>Options</a></li>
<li class="tsd-kind-interface tsd-is-external"><a href="interfaces/AuthorizationParams.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>Authorization<wbr/>Params</a></li>
<li class="tsd-kind-interface tsd-is-external"><a href="interfaces/GetTokenSilentlyOptions.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>Get<wbr/>Token<wbr/>Silently<wbr/>Options</a></li>
<li class="tsd-kind-interface tsd-is-external"><a href="interfaces/GetTokenWithPopupOptions.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>Get<wbr/>Token<wbr/>With<wbr/>Popup<wbr/>Options</a></li>
<li class="tsd-kind-interface tsd-is-external"><a href="interfaces/ICache.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>ICache</a></li>
<li class="tsd-kind-interface tsd-is-external"><a href="interfaces/IdToken.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>Id<wbr/>Token</a></li>
<li class="tsd-kind-interface"><a href="interfaces/LogoutOptions.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>Logout<wbr/>Options</a></li>
<li class="tsd-kind-interface tsd-is-external"><a href="interfaces/LogoutUrlOptions.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>Logout<wbr/>Url<wbr/>Options</a></li>
<li class="tsd-kind-interface tsd-is-external"><a href="interfaces/PopupConfigOptions.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>Popup<wbr/>Config<wbr/>Options</a></li>
<li class="tsd-kind-interface tsd-is-external"><a href="interfaces/PopupLoginOptions.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>Popup<wbr/>Login<wbr/>Options</a></li>
<li class="tsd-kind-interface"><a href="interfaces/RedirectLoginOptions.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>Redirect<wbr/>Login<wbr/>Options</a></li>
<li class="tsd-kind-type-alias tsd-is-external"><a href="types/CacheLocation.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-4194304-path"></rect><path d="M11.31 16V8.224H8.91V7.24H14.79V8.224H12.39V16H11.31Z" fill="var(--color-text)" id="icon-4194304-text"></path></svg>Cache<wbr/>Location</a></li>
<li class="tsd-kind-type-alias tsd-is-external"><a href="types/Cacheable.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4194304-path"></use><use href="#icon-4194304-text"></use></svg>Cacheable</a></li>
<li class="tsd-kind-variable"><a href="variables/AUTH0_INJECTION_KEY.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-variable)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-32-path"></rect><path d="M11.106 16L8.85 7.24H9.966L11.454 13.192C11.558 13.608 11.646 13.996 11.718 14.356C11.79 14.708 11.842 14.976 11.874 15.16C11.906 14.976 11.954 14.708 12.018 14.356C12.09 13.996 12.178 13.608 12.282 13.192L13.758 7.24H14.85L12.582 16H11.106Z" fill="var(--color-text)" id="icon-32-text"></path></svg>AUTH0_<wbr/>INJECTION_<wbr/>KEY</a></li>
<li class="tsd-kind-function"><a href="functions/authGuard.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>auth<wbr/>Guard</a></li>
<li class="tsd-kind-function"><a href="functions/createAuth0.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Auth0</a></li>
<li class="tsd-kind-function"><a href="functions/createAuthGuard.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>create<wbr/>Auth<wbr/>Guard</a></li>
<li class="tsd-kind-function"><a href="functions/useAuth0.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>use<wbr/>Auth0</a></li></ul></nav></div></div>
<div class="overlay"></div><script src="assets/main.js"></script></body></html>