# Javascript
{% hint style="info" %}
This tutorial is based on the [example app](https://github.com/LanderDK/blitzware-js-sdk/tree/master/examples/blitzware-js-example-01).
{% endhint %}
1. [**Configure BlitzWare**](#configure-blitzware)
2. [**Integrate BlitzWare in your application**](#integrate-blitzware-in-your-application)
3. [**Setting up the application**](#setting-up-the-application)
4. [**Reference the SDK**](#reference-the-sdk)
5. [**Initialize and use the SDK**](#initialize-and-use-the-sdk)
## 1) Configure BlitzWare
### Get Your Application Keys
You will need some details about your application to communicate with BlitzWare. You can get these details from the Application Settings section in the BlitzWare dashboard.
You need the **Client ID**.
### Configure Redirect URIs
A redirect URI is a URL in your application where BlitzWare redirects the user after they have authenticated. The redirect URI for your app must be added to the **Redirect URIs** list in your **Application Settings** under the **Security** tab. If this is not set, users will be unable to log in to the application and will get an error.
## 2) Integrate BlitzWare in your application
Reference the CDN:
{% code lineNumbers="true" %}
```html
```
{% endcode %}
## 3) Setting up the application
### Create a basic HTML page
Create a folder on your machine to house the application, then add an `index.html` file to the root of the project. This HTML page will display a welcome message and have a "gated" section which requires the user to be authenticated before accessing. You can copy/paste the following content into the file. You will be adding more lines as you progress with this article.
Add the following content to the `index.html` file you just created:
{% code title="index.html" lineNumbers="true" %}
```html
BlitzWare JS Example 01
BlitzWare JS Example 01
```
{% endcode %}
Finally, create a new file in the root of your application called `app.js`. This will house the application-specific logic that you will create over the next few sections.
The folder structure so far should look like the following:
{% code lineNumbers="true" %}
```
.
├── index.html
├── style.css
├── app.js
```
{% endcode %}
## 4) Reference the SDK
This article is based on the new SPA SDK available [here](https://github.com/LanderDK/blitzware-js-sdk). You can reference the package from the CDN in the `index.html` file by placing the script tags at the very bottom of the `body` tag:
{% code title="index.html" lineNumbers="true" %}
```html
```
{% endcode %}
## 5) Initialize and use the SDK
The BlitzWare Javascript SDK must be properly initialized with the information of the BlitzWare application created above. This must be initialized using your app's **Client ID** and **Redirect URI**.
The SDK gives you tools to quickly implement user authentication in your Javascript application, such as creating a login button using the `login()` method from the `BlitzWareAuth` class. Executing `login()` redirects your users to the BlitzWare Universal Login Page, where BlitzWare can authenticate them. Upon successful authentication, BlitzWare will redirect your users back to your application.
The SDK helps you retrieve the profile information associated with logged-in users quickly, such as their name or profile picture, to personalize the user interface. The profile information is available through `getUser` function exposed by the `BlitzWareAuth` class.
You also need a way to log out. You can create a logout button using the `logout()` method from the `BlitzWareAuth` class. Executing `logout()` clears the session and makes sure that the user can not access protected resources.
Take this `app.js` file component as an example of how to use it:
{% code title="app.js" lineNumbers="true" %}
```javascript
BlitzWareAuth.createBlitzWareClient({
clientId: "your-client-id",
redirectUri: "your-redirect-uri",
responseType: "code", // or "token" for implicit flow
}).then(async (blitzWareClient) => {
document.getElementById("login").addEventListener("click", (e) => {
e.preventDefault();
blitzWareClient.login();
});
document.getElementById("logout").addEventListener("click", (e) => {
e.preventDefault();
blitzWareClient.logout();
});
if (
location.search.includes("state=") &&
location.search.includes("access_token=")
) {
await blitzWareClient.handleRedirect();
}
const isAuthenticated = await blitzWareClient.isAuthenticated();
const user = await blitzWareClient.getUser();
const isLoading = await blitzWareClient.isLoading();
const loginButtonElement = document.getElementById("login");
const logoutButtonElement = document.getElementById("logout");
const profileElement = document.getElementById("profile");
if (isLoading) {
profileElement.style.display = "block";
profileElement.innerHTML = `
