Вход в личный кабинет 1 – start branch
This is the starting point for the application.
Advanced options
Advanced options can be set by specifying the advancedOptions property when configuring Auth0Client. Learn about the complete set of advanced options in the API documentation
Auth0 configuration
Create a Single Page Application in the Auth0 Dashboard.
If you’re using an existing application, verify that you have configured the following settings in your Single Page Application:
- Click on the “Settings” tab of your application’s page.
- Ensure that “Token Endpoint Authentication Method” under “Application Properties” is set to “None”
- Scroll down and click on the “Show Advanced Settings” link.
- Under “Advanced Settings”, click on the “OAuth” tab.
- Ensure that “JsonWebToken Signature Algorithm” is set to
RS256and that “OIDC Conformant” is enabled.
Next, configure the following URLs for your application under the “Application URIs” section of the “Settings” page:
These URLs should reflect the origins that your application is running on. Allowed Callback URLs may also include a path, depending on where you’re handling the callback (see below).
Take note of the Client ID and Domain values under the “Basic Information” section. You’ll need these values in the next step.
Branches
In this repository you’ll find several branches. Each of the branches represents one step taken to implement the Authentication.
Contributing
We appreciate feedback and contribution to this repo! Before you get started, please see the following:
Creating a custom cache
The SDK can be configured to use a custom cache store that is implemented by your application. This is useful if you are using this SDK in an environment where more secure token storage is available, such as potentially a hybrid mobile app.
To do this, provide an object to the cache property of the SDK configuration.
The object should implement the following functions. Note that all of these functions can optionally return a Promise or a static value.
| Signature | Return type | Description |
|---|---|---|
get(key) | Promise or object | Returns the item from the cache with the specified key, or undefined if it was not found |
set(key: string, object: any) | Promise or void | Sets an item into the cache |
remove(key) | Promise or void | Removes a single item from the cache at the specified key, or no-op if the item was not found |
allKeys() | Promise<string[]> or string [] | (optional) Implement this if your cache has the ability to return a list of all keys. Otherwise, the SDK internally records its own key manifest using your cache. Note: if you only want to ensure you only return keys used by this SDK, the keys we use are prefixed with @@auth0spajs@@ |
Here’s an example of a custom cache implementation that uses sessionStorage to store tokens and apply it to the Auth0 SPA SDK:
Creating the client
Create an Auth0Client instance before rendering or initializing your application. You should only have one instance of the client.
Data caching options
The SDK can be configured to cache ID tokens and access tokens either in memory or in local storage. The default is in memory. This setting can be controlled using the cacheLocation option when creating the Auth0 client.
To use the in-memory mode, no additional options need are required as this is the default setting. To configure the SDK to cache data using local storage, set cacheLocation as follows:
Important: This feature will allow the caching of data such as ID and access tokens to be stored in local storage. Exercising this option changes the security characteristics of your application and should not be used lightly.
Installation
From the CDN:
Using npm:
npm install @auth0/auth0-spa-jsUsing yarn:
yarn add @auth0/auth0-spa-jsLog in to an organization
Log in to an organization by specifying the organization parameter when setting up the client:
You can also specify the organization when logging in:
Organizations
Organizations is a set of features that provide better support for developers who build and maintain SaaS and Business-to-Business (B2B) applications.
Refresh token fallback
In all cases where a refresh token is not available, the SDK falls back to the legacy technique of using a hidden iframe with prompt=none to try and get a new access token and refresh token. This scenario would occur for example if you are using the in-memory cache and you have refreshed the page. In this case, any refresh token that was stored previously would be lost.
Refresh tokens
Refresh tokens can be used to request new access tokens. Read more about how our refresh tokens work for browser-based applications to help you decide whether or not you need to use them.
Running the example
This application has a VanillaJS SPA and a NodeJS backend.
Support feedback
For support or to provide feedback, please raise an issue on our issue tracker.
Vulnerability reporting
Please do not report security vulnerabilities on the public GitHub issue tracker. The Responsible Disclosure Program details the procedure for disclosing security issues.
What is auth0?
Auth0 helps you to easily:
Frontend
The frontned uses browserify and gulp, so you must have node, npm and gulp installed.
Once you have that installed, you just need to run the following:
3 – sending jwts on requests
Now, we’ve implemented sending the JWT on the Authorization header on every request. Check it out here
Backend
Clone the server for this example.
Run the server app in the port 3001 following the needed instructions.