nuxt-flarum v1.1.6
nuxt-flarum
A Nuxt module for Flarum SSO.
Setup
The setup process includes stages for both Nuxt.js and Flarum.
Configure Nuxt.js
Install with npm:
npm install @nuxtjs/flarum
Update nuxt.config.js:
module.exports = {
modules: [
'@nuxtjs/flarum',
],
flarum: {
url: 'https://discuss.example.com',
sessionCookieDomain: '.example.com',
apiKey: 'master-api-key',
salt: 'random-secret-string'
}
}
Configure Flarum
Create a random token and put it in the api_keys
table of your Flarum
database.
Install flarum-ext-sso:
composer require wuethrich44/flarum-ext-sso
Activate the extension and fill in the redirect URLs for login, signup and logout.
Configure the server (options for Apache shown):
# Set headers
Header always set Access-Control-Allow-Origin "https://www.example.com"
Header always set Access-Control-Allow-Credentials true
Header always set Access-Control-Allow-Methods "GET, POST, PUT, PATCH, DELETE, OPTIONS"
Header always set Access-Control-Allow-Headers "Origin, Content-Type, Authorization, Set-Cookie"
# Return a 200 response for OPTIONS requests
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]
Once the server is restarted, SSO should be enabled.
Usage
<template>
<main>
<input v-model="username">
<input v-model="email">
<input v-model="password">
<button @click="signin">Signin</button>
<button @click="signout">Signout</button>
</main>
</template>
<script>
export default {
data: {
username: null,
email: null,
password: null
},
methods: {
signin () {
this.$flarum.signin(this.username, this.email)
},
signout () {
this.$flarum.signout()
}
}
}
</script>
Users are resolved by email address. If no user can be found with an email
address that matches one passed in flarum.signin()
then a new user will be
created.
This means that if the user updates their email address in your main application this update should also be passed to Flarum. Otherwise, when the user next visits the Flarum site a new account created for them (using their new email address). Here's an example of a function that can be used to update a current user's email address:
updateEmail(oldEmail, newEmail) {
return this.$flarum.getUserByEmail(oldEmail).then(flarumUser => {
if (flarumUser) {
this.$flarum.updateUser(flarumUser.id, {
email: newEmail
})
}
}).catch(err => {
this.$nuxt.error(err)
})
}