## Vanilla.js hosted login quickstart
Quickly integrate Frontegg’s login box into your JavaScript app with support for Sign In, Sign Up, and SSO — using built-in support for redirects, OpenID Connect, and OAuth2.
br
Check out the sample package on GitHub
br
Getting your Frontegg subdomain and `clientId`
Frontegg creates a unique subdomain and client id for every environment created on the account. In order to retrieve the clientId `subdomain` that will act as the `baseUrl` in the integration, navigate to your workspace `Keys & domains` menu, and copy the Frontegg domain and `clientId`.
br
### Step 1: Adding Frontegg to your app
Frontegg can be added to your app via npm / script on your application head.
```
npm install @frontegg/js
```
```
yarn add @frontegg/js
```
```
...
```
### Step 2: Configure
Frontegg works with Context options and needs to be initialized with this context. In order to initialize Frontegg use the following code snippet
#### Add the Following Script to Initialize Frontegg on Your Application and to Interact With the Login Page
See [`contextOptions`](/ciam/sdks/components/fronteggappoptions#contextoptions) and [`hostedLoginBox`](/ciam/sdks/components/fronteggappoptions#hostedLoginBox) for more information.
```typescript
import {initialize} from "@frontegg/js"
const style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.innerHTML = '';
document.getElementsByTagName('head')[0].appendChild(style);
const app = initialize({
contextOptions: {
baseUrl: "https://[YOUR-SUB-DOMAIN].frontegg.com",
appId: "[YOUR_APP_ID]"
},
authOptions: {
keepSessionAlive: true // Keeps the session alive by refreshing the JWT in the background
},
hostedLoginBox: true
})
// Comment out to disable auto-redirect (login or app if authenticated)
app.ready(() => {
app.store.subscribe(()=>{
const { auth } = app.store.getState();
if(!auth.isLoading) {
if (!auth.isAuthenticated) {
app.loginWithRedirect()
}
}
})
document.getElementById("loginWithRedirect").addEventListener('click', () => {
app.loginWithRedirect()
})
document.getElementById("logout").addEventListener('click', () => {
app.logout()
})
```
See [`keepSessionAlive`](/ciam/sdks/components/fronteggstoreoptions#keepsessionalive) for more information.
br
Add the representative HTML button that will redirect the UI to the login page. Clicking on the button should take you to the login dialog.
```html
Title
This is Frontegg Integration in Vanilla Javascript
```
### Step 3: Get the user context
The user context is available from the Frontegg app. Upon initialization, you can subscribe to state notifications which will include whether the user is authenticated or not and what is the JWT of the user.
In order to subscribe to user state notifications add the following code snippet:
```typescript
import {initialize} from "@frontegg/js"
const style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.innerHTML = '';
document.getElementsByTagName('head')[0].appendChild(style);
const app = initialize({
contextOptions: {
baseUrl: "https://YOUR_DOMAIN.frontegg.com", //set your Frontegg environment domain and client ID here
clientId: 'YOUR_FRONTEGG_CLIENT_ID'
},
hostedLoginBox: true
})
// Comment out to disable auto-redirect (login or app if authenticated)
app.ready(() => {
console.log("App is ready");
let unsubscribe = app.store.subscribe(()=>{
const {auth} = app.store.getState();
if(!auth.isLoading) {
if (!auth.isAuthenticated) {
app.loginWithRedirect()
}
}
})
})
document.getElementById("loginWithRedirect").addEventListener('click', () => {
app.loginWithRedirect()
})
document.getElementById("logout").addEventListener('click', () => {
app.logout()
})
app.store.subscribe(() => {
const state = app.store.getState();
if (state.auth.user) {
document.getElementById('user-container').innerText = state.auth.user.email;
} else {
document.getElementById('user-container').innerText = 'Not Authenticated'
}
document.getElementById('app-root').style.display = state.auth.isLoading ? 'hidden' : 'block'
let styleHtml = ''
if (state.auth.isAuthenticated) {
styleHtml += '[fe-state="isAuthenticated"] { }';
styleHtml += '[fe-state="!isAuthenticated"] { display: none; }';
} else {
styleHtml += '[fe-state="isAuthenticated"] { display: none; }';
styleHtml += '[fe-state="!isAuthenticated"] { }';
}
if(app.options.hostedLoginBox){
styleHtml += '[fe-mode="hosted"] { }';
} else {
styleHtml += '[fe-mode="hosted"] { display: none; }';
}
style.innerHTML = styleHtml;
})
```
br
Great, Frontegg is now integrated with your app!