Add authentication through openid

src/store/modules/auth.js

@@ -98,6 +98,40 @@ export default {
 					ctx.commit(LOADING, false, {root: true})
 				})
 		},
+		openIdAuth(ctx, {provider, code}) {
+			const HTTP = HTTPFactory()
+			ctx.commit(LOADING, true, {root: true})
+
+			const data = {
+				code: code,
+			}
+
+			// Delete an eventually preexisting old token
+			localStorage.removeItem('token')
+			return HTTP.post(`/auth/openid/${provider}/callback`, data)
+				.then(response => {
+					// Save the token to local storage for later use
+					localStorage.setItem('token', response.data.token)
+
+					// Tell others the user is autheticated
+					ctx.commit('isLinkShareAuth', false)
+					ctx.dispatch('checkAuth')
+					return Promise.resolve()
+				})
+				.catch(e => {
+					if (e.response) {
+						let errorMsg = e.response.data.message
+						if (e.response.status === 401) {
+							errorMsg = 'Wrong username or password.'
+						}
+						ctx.commit(ERROR_MESSAGE, errorMsg, {root: true})
+					}
+					return Promise.reject()
+				})
+				.finally(() => {
+					ctx.commit(LOADING, false, {root: true})
+				})
+		},
 
 		linkShareAuth(ctx, hash) {
 			const HTTP = HTTPFactory()

src/views/user/OpenIdAuth.vue

@@ -1,11 +1,59 @@
 <template>
 	<div>
-		{{ $route.params.provider }}
+		<div class="notification is-danger" v-if="errorMessage">
+			{{ errorMessage }}
+		</div>
+		<div class="notification is-info" v-if="loading">
+			Authenticating...
+		</div>
 	</div>
 </template>
 
 <script>
+import {mapState} from 'vuex'
+
+import {ERROR_MESSAGE, LOADING} from '@/store/mutation-types'
+
 export default {
 	name: 'Auth',
+	computed: mapState({
+		errorMessage: ERROR_MESSAGE,
+		loading: LOADING,
+	}),
+	mounted() {
+		this.authenticateWithCode()
+	},
+	methods: {
+		authenticateWithCode() {
+			// This component gets mounted twice: The first time when the actual auth request hits the frontend,
+			// the second time after that auth request succeeded and the outer component "content-no-auth" isn't used
+			// but instead the "content-auth" component is used. Because this component is just a route and thus
+			// gets mounted as part of a <router-view/> which both the content-auth and content-no-auth components have,
+			// this re-mounts the component, even if the user is already authenticated.
+			// To make sure we only try to authenticate the user once, we set this "authenticating" lock in localStorage
+			// which ensures only one auth request is done at a time. We don't simply check if the user is already
+			// authenticated to not prevent the whole authentication if some user is already logged in.
+			if (localStorage.getItem('authenticating')) {
+				return
+			}
+			localStorage.setItem('authenticating', true)
+
+			this.$store.commit(ERROR_MESSAGE, '')
+
+			this.$store.dispatch('auth/openIdAuth', {
+				provider: this.$route.params.provider,
+				code: this.$route.query.code,
+			})
+				.then(() => {
+					this.$router.push({name: 'home'})
+				})
+				.catch(() => {
+					// Handled through global state
+				})
+				.finally(() => {
+					localStorage.removeItem('authenticating')
+				})
+		},
+	},
 }
 </script>