Hello,
I made my way to the part two of installing 8base to Webflow blog post but I’m confused.
It’s telling me to copy the following Filestack Code.
<script src="https://static.filestackapi.com/v3/filestack.js "></script>
<!-- VUEJS CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
<!-- GLOBAL EIGHTBASE MODULE -->
<script defer>
/* Accessible globally on webflow site */
window.EightBase = (config => {
/**
* Helper object for handling local storage. This will allow us
* to easily set and retrieve user data and authentication data
* in the browser's localStorage object.
*/
const store = {
/* Access value in localStorage */
get: key => {
return JSON.parse(localStorage.getItem(key))
},
/* Set value in localStorage */
set: (key, value) => {
localStorage.setItem(key, JSON.stringify(value))
return value
},
/* Remove Item from localStorage */
remove: key => {
localStorage.removeItem(key)
},
/* Clear values from localStorage */
clear: () => {
localStorage.clear()
},
/* Helper for determining if user is authenticated */
isAuthenticated: () => {
let auth = JSON.parse(localStorage.getItem('auth'))
return Boolean(auth) && Boolean(auth.idToken)
}
}
/**
* Whenever a page loads, this piece of code will look for
* whether the current route is private (as defined in the
* config object). If it is private and the user is not
* authenticated, it will redirect the user to the logoutRedirect
* route (also defined in the config object).
*/
let isProtectedRoute = config.routes.private.some(p =>
window.location.pathname.match(p)
)
if (isProtectedRoute && !store.isAuthenticated()) {
window.location.replace(config.routes.logoutRedirect)
}
/**
* API is a module that we'll use to execute calls to
* the 8base API. Webflow includes jQuery by default,
* and Ajaxs will work great for a graphQL Client.
*/
const api = {
request: (opts = {}) => {
return $.ajax(
Object.assign(
{
type: 'POST',
url: config.endpoint,
contentType: 'application/json',
/**
* Unless overridden, the idToken will get retrieved
* from localStorage before ever request and set as
* a bearer token.
*/
beforeSend: xhr => {
var { idToken } = store.get('auth')
xhr.setRequestHeader('Authorization', 'Bearer ' + idToken)
}
},
opts
)
)
}
}
return {
config,
store,
api
}
})({
/**
* !!!CONFIG!!!
*
* This object supplies some required info to the module.
* You're
*/
endpoint: '<PUT_YOUR_8BASE_API_ENDPOINT>',
authProfileId: '<PUT_YOUR_8BASE_AUTH_PROFILE_ID>',
routes: {
loginRedirect: '/profile',
logoutRedirect: '/sign-in',
private: ['/profile']
}
})
</script>
The issue is where do I put it? The article was never very clear. It says the browser but I have no idea what that means.