⚠️ Disclaimer: No Longer Maintained Please be aware that this module is no longer actively maintained or supported. However, it is important to note that this change will not break any existing functionality or cause disruptions. While bug fixes, updates, and new feature development will not be provided, the module will continue to work as it currently does. Compatibility with future systems, frameworks, or dependencies is not guaranteed, and caution should be exercised when using it with the latest technologies. The issue tracker is no longer monitored, and new issues will not be addressed. The decision to discontinue the maintenance and support of this module was driven by resource limitations and a shift in project focus. We recommend considering Storyblok App Extension Auth as an alternative solution. No further contributions or pull requests will be accepted for this module.
Storyblok's authentification module for the Nuxt.js
You can create a custom Storyblok app only if you are part of the partner program.
- Add
@storyblok/nuxt-auth
dependency using yarn or npm to your project - Add
@storyblok/nuxt-auth
tomodules
section ofnuxt.config.js
{
modules: [
[
'@storyblok/nuxt-auth',
{
id: 'Client ID from Storyblok App',
secret: 'Secret from Storyblok App',
redirect_uri: 'REDIRECT_URI' // Equal to callbakc URL of Oauth2 from Storyblok App
}
],
]
}
- install
dotenv
module and create.env
file in root of your project - keep all the confidential informations in
.env
file - load confidental information in
nuxt.config.js
usingdotenv
package
require('dotenv').config()
export default {
// ...
modules: [
'@nuxtjs/dotenv',
[
'@storyblok/nuxt-auth',
{
id: process.env.CONFIDENTIAL_CLIENT_ID,
secret: process.env.CONFIDENTIAL_CLIENT_SECRET,
redirect_uri: process.env.CONFIDENTIAL_CLIENT_REDIRECT_URI
}
]
]
// ...
}
// .env file
CONFIDENTIAL_CLIENT_ID="Id from Storyblok App"
CONFIDENTIAL_CLIENT_SECRET="Secret from Storyblok App"
CONFIDENTIAL_CLIENT_REDIRECT_URI="callback url of your app"
The module options can receive the following fields:
The client id from Storyblok App
The secret id from Storyblok App
Callback URL to your app
- default: '/'
The entry point to your application. It is a page that will be receive the space_id
information as router query parameters. See the "Defining a new entry point" section for more details
The module registers auth middleware in your Nuxt.js project and router for the StoryblokClient. After that you can use axios in your vue files to get data from Storyblok using the Management API.
To use Storyblok Management API, all paths in axios was prefixed with /auth/
. If you want to get all stories from space ide 606, you would call with management API spaces/606/stories/
here you call /auth/spaces/606/stories/
.
For example, to get all stories from specific space:
import axios from 'axios'
export default {
data() {
return {
stories: [],
perPage: null,
total: null
}
},
mounted() {
if (window.top == window.self) {
// when your app is authenticated,
// this URL will be redirect to <YOUR_APP_URL>/space_id?<AUTHORIZED_SPACE>
window.location.assign('https://app.storyblok.com/oauth/app_redirect')
} else {
// however, once authenticated and inside of Storyblok Space APP,
// you're able to use axios to make the necessary requests
// for example, get the stories from the authenticated space
this.loadStories()
}
},
methods: {
loadStories() {
// get the space id from URL and use it in requests
axios.get(`/auth/spaces/${this.$route.query.space_id}/stories`)
.then((res) => {
// do what you want to do ;)
// this is only basic sample
this.perPage = res.data.perPage
this.total = res.data.total
this.stories = res.data.stories
})
}
}
}
Another example, to create a new story:
import axios from 'axios'
export default {
data() {
return {
loading: false,
story: {
name: ''
}
}
},
methods: {
createStory() {
this.loading = true
// The request body is the same from Management API
// https://www.storyblok.com/docs/api/management#core-resources/stories/create-story
const body = {
story: { ...this.story }
}
// get the space id from URL and use it in requests
return axios
.post(`/auth/spaces/${this.$route.query.space_id}/stories`, body)
.then((res) => {
this.loading = false
})
}
}
}
To get information about the authenticated user, you should make a GET
request to /auth/user
path.
Example:
import axios from 'axios'
export default {
data() {
return {
user: {}
}
},
mounted() {
if (window.top == window.self) {
window.location.assign('https://app.storyblok.com/oauth/app_redirect')
} else {
this.loadUserInformation()
}
},
methods: {
loadUserInformation() {
axios.get(`/auth/user?space_id=${this.$route.query.space_id}`)
.then((res) => {
this.user = res.data || {}
})
}
}
}
Change this setting if you want to have a different entry point than the default one '/'
. Example:
// ...
'@storyblok/nuxt-auth',
{
id: process.env.CONFIDENTIAL_CLIENT_ID,
secret: process.env.CONFIDENTIAL_CLIENT_SECRET,
redirect_uri: process.env.CONFIDENTIAL_CLIENT_REDIRECT_URI,
return_url: '/auth'
}
// ...
With this configuration you can create a file for the /auth
route and handle the logic there. You will find the query parameter space_id
in $router.query
which needs to be used for the api calls:
<template>
<div>
<h1> The space id is {{ space_id }} </h1>
</div>
</template>
<script>
export default {
name: 'AuthExamplePage',
data: () => ({
space_id: null
}),
mounted () {
// get the space_id from $router.query object
this.space_id = this.$route.query.space_id
}
}
</script>
Check out the workflow manager app to see an example github.com/storyblok/storyblok-workflow-app.
Copyright (c) Storyblok it@storyblok.com