> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kobble.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue.js quickstart

> Add authentication to your Vue.js application in under 10 minutes using Kobble SDK.

## You will learn how to:

* Create a new Vue.js application using Vite
* Configure `@kobbleio/javascript` SDK
* Protect your application routes

<Note>Pre-requisites: You need to [set up your Kobble account](/learning/quickstart/setup) before starting this guide.</Note>

## Example repository

[<img src="https://mintcdn.com/kobble/g-BoOFA0qGvJRBgZ/images/vue-auth-example-banner.png?fit=max&auto=format&n=g-BoOFA0qGvJRBgZ&q=85&s=bcf320afa609a2e7bc31395ea5a156a3" alt="Vue Auth Example" width="1792" height="321" data-path="images/vue-auth-example-banner.png" />](https://github.com/kobble-io/vue-auth-example)

This is a simple Vue.js starter project that demonstrates how to implement authentication in a Vue.js application.

It uses vue-router, pinia, tailwind and [@kobbleio/javascript SDK](https://www.npmjs.com/package/@kobbleio/javascript) to manage the authentication state of the application.

Check our the repository for more information:

* [**Repository**](https://github.com/kobble-io/vue-auth-example)
* [**Demo**](https://vue-auth-example.vercel.app)

## Getting started

<Steps>
  <Step title="Create your vue.js application">
    Scaffold your new Vue.js application using [Vite](https://vitejs.dev/guide/).

    <CodeGroup>
      ```bash npm theme={null}
      npm create vite@latest my-vue-app -- --template vue-ts
      cd my-vue-app
      npm install
      npm run dev
      ```

      ```bash yarn theme={null}
      yarn create vite@latest my-vue-app -- --template vue-ts
      cd my-vue-app
      yarn install
      yarn run dev
      ```

      ```bash npm theme={null}
      pnpm create vite@latest my-vue-app -- --template vue-ts
      cd my-vue-app
      pnpm install
      pnpm run dev
      ```
    </CodeGroup>
  </Step>

  <Step title="Install @kobbleio/javascript">
    Our auth SDK for SPAs helps you to easily authenticate your users in your Vue.js application and manage their session.

    <CodeGroup>
      ```bash npm theme={null}
      npm install @kobbleio/javascript
      ```

      ```bash yarn theme={null}
      yarn add @kobbleio/javascript
      ```

      ```bash pnpm theme={null}
      pnpm add @kobbleio/javascript
      ```
    </CodeGroup>
  </Step>

  <Step title="Initialize the SDK">
    Create a file `src/kobble/index.ts` where you will initialize the SDK and export the Kobble instance.

    ```typescript theme={null}
    // src/kobble/index.ts

    import { createKobbleClient } from '@kobbleio/javascript'

    export const kobbleClient = createKobbleClient({
        domain: import.meta.env.VITE_KOBBLE_DOMAIN,
        clientId: import.meta.env.VITE_KOBBLE_CLIENT_ID,
        redirectUri: import.meta.env.VITE_KOBBLE_REDIRECT_URI
    })
    ```
  </Step>

  <Step title="Setup the environment variables">
    Create a `.env` file at the root of your project and add the following environment variables.

    ```env theme={null}
    VITE_KOBBLE_DOMAIN=https://your-project.portal.kobble.io
    VITE_KOBBLE_CLIENT_ID=your-client-id
    VITE_KOBBLE_REDIRECT_URI=http://localhost:3000/callback
    ```

    <Note>**KOBBLE\_DOMAIN** and **KOBBLE\_CLIENT\_ID** can be found in [the Kobble Application we created earlier](/learning/quickstart/setup). The **REDIRECT\_URI** must match the callback route we're going to configure in the next step of this tutorial.</Note>
  </Step>

  <Step title="Create a callback handler">
    Install and configure [vue-router](https://router.vuejs.org/).

    <Note>If you're not familiar with Vue Router, you can check our router configuration [here](https://github.com/kobble-io/vue-auth-example/blob/main/src/router/index.ts).</Note>

    Then create a new page view to handle our callback `src/views/CallbackView.vue`.

    Use the Kobble client to handle the callback and redirect the user to the home page on page mount.

    ```typescript theme={null}
    // src/views/CallbackView.vue
    // ... rest of your page

    async mounted() {
        try {
            await kobbleClient.handleRedirectCallback()
            this.$router.replace({ name: 'home' })
        } catch (e: any) {
            console.error('Error handling redirect callback:', e)
        }
    }
    ```
  </Step>

  <Step title="Use the loginWithRedirect method">
    Then we can use the `loginWithRedirect` method to redirect the user to the Kobble login page whenever we want to authenticate the user.

    For example with a simple button:

    ```typescript theme={null}
    // src/components/LoginButton.vue
    <script>
        import { kobbleClient } from '../kobble'

        const login = async () => {
            await kobbleClient.loginWithRedirect()
        }
    </script>
    <template>
        <button @click="login">Login</button>
    </template>
    ```
  </Step>

  <Step title="Going further">
    At this stage, you have successfully added authentication to your Vue.js application using Kobble SDK.

    Now you can use all methods provided by our SDK to protect your routes, get the user profile, listen to the user state changes and more.

    Here are some useful examples:

    ```typescript theme={null}
    import { kobbleClient } from '../kobble'

    // In an async function
    const user = await kobbleClient.getUser()

    const isAuthenticated = await kobbleClient.isAuthenticated()

    const accessToken = await kobbleClient.getAccessToken()

    const idToken = await kobbleClient.getIdToken()

    await kobbleClient.logout()
    ```

    You can also listen to the user state changes:

    ```typescript theme={null}
    import { kobbleClient } from '../kobble'

    kobbleClient.onUserStateChanged((data) => {
        console.log('User state changed:', data.user) // User | null
    })
    ```
  </Step>
</Steps>

#### 🎉 You made it!

You have successfully added authentication to your Vue.js application using Kobble SDK.