Skip to main content

Protecting routes

Vue Router

You can protect routes by creating a navigation guard that will inquire for the authentication status of the user.

This means you can have certain parts of your app only available for signed-in users.


This example uses Vue Router v4 for routing.

import { createApp } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import { NhostClient } from '@nhost/vue'
import App from './App.vue'

const nhost = new NhostClient({
subdomain: '<your-subdomain>',
region: '<your-region>'

const router = createRouter({
history: createWebHashHistory(),
routes: [
// your custom routes

router.beforeEach(async (to) => {
const authenticated = await nhost.auth.isAuthenticatedAsync()
if (!authenticated) {
// The `/profile` route is protected and will redirect to `/signin` if not authenticated
if (to.path === '/profile') {
return '/signin'
return true