# @larasense/ssg-auth-vue

> [static-site-generation](https://github.com/larasense/static-site-generation) is a Laravel Package for generate static sites using a command or a middleware on visit.

Latest version **0.0.9** (published 2023-06-21) · 0 weekly downloads

## Install

```sh
npm install @larasense/ssg-auth-vue
pnpm add @larasense/ssg-auth-vue
yarn add @larasense/ssg-auth-vue
bun add @larasense/ssg-auth-vue
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.9 |
| Published | 2023-06-21 |
| First published | 2023-06-16 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 9.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | josensanchez |

## Links

- npm: https://www.npmjs.com/package/@larasense/ssg-auth-vue
- npm.io page: https://npm.io/package/@larasense/ssg-auth-vue

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.2.47
- [pinia](https://npm.io/package/pinia.md) ^2.1.4

## Recent versions

- 0.0.9 (latest) — 2023-06-21
- 0.0.8 — 2023-06-21
- 0.0.7 — 2023-06-21
- 0.0.6 — 2023-06-19
- 0.0.5 — 2023-06-19
- 0.0.4 — 2023-06-16
- 0.0.3 — 2023-06-16
- 0.0.2 — 2023-06-16
- 0.0.1 — 2023-06-16

## README

# Authentication for larasense/static-site-generation application using Vue3 and Pinia

[static-site-generation](https://github.com/larasense/static-site-generation) is a Laravel Package for generate static sites using a command or a middleware on visit.

It is meant to be used on a Breeze or Jetstream with the InertiaJs stack, and provide a simple and quick way to generate and consume static content.

But it come with a cabeat. the site generated with no credentials and for that reason authentication need to be handeled difffernly on the Front side.

## Instalation

```bash
npm i @larasense/ssg-auth-vue
```

## Configuration

TBD

## How to use

### Backend

on `app/Http/Middleware/HandleInertiaRequests.php` or wherever the share props is set, call the getUserInfo() from the StaticSite Facade to replace the auth prop.

```php
// app/Http/Middleware/HandleInertiaRequests.php
    /**
     * Define the props that are shared by default.
     *
     * @return array<string, mixed>
     */
    public function share(Request $request): array
    {
        return array_merge(parent::share($request), [
            // ....
            'auth' => StaticSite::getUserInfo(),
        ]);
    }

```

### Frontend

On every page or component that need to access the user

```vue
<script setup>
import { useAuth } from "@larasense/ssg-auth-vue";
const props = defineProps({
  // ...
  auth: Object,
});
const auth = useAuth();
auth.setPropUser(props.auth.user);
</script>
```

and then replace `$page.props.auth.user` for `auth.user`

```html
<Link v-if="auth.user" :href="route('dashboard')"
    class="">
Dashboard</Link>

<template v-else>
    <Link :href="route('login')"
        class="">
    Log in</Link>
    <Link v-if="canRegister" :href="route('register')"
        class="">
    Register</Link>
</template>
```

---
_Source: https://npm.io/package/@larasense/ssg-auth-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._