LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-08 21:07:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix Nuxt SSR Auth tutorial

Browse Source
This commit is contained in:
adityaoberai
2025-06-04 17:40:46 +05:30
parent 65210d742c
commit 304ab6010c
7 changed files with 78 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/routes/docs/tutorials/nuxt-ssr-auth/step-1/+page.markdoc
View File

@@ -5,7 +5,6 @@ description: Add SSR authentication to your Nuxt app with Appwrite
step: 1
difficulty: beginner
back: /docs/tutorials
draft: true
readtime: 20
framework: Nuxt SSR
category: Auth
@@ -22,4 +21,4 @@ Before following this tutorial, have the following prepared:
- A basic knowledge of Vue and Nuxt.
If you're inspired and wish to follow along, make sure you've followed [Start with Nuxt](https://appwrite.io/docs/quick-starts/nuxt) first.
Clone the [demos-for-vue](https://github.com/appwrite/demos-for-vue) examples and follow along with the source code.
Clone the [nuxt-ssr-auth](https://github.com/appwrite-community/nuxt-ssr-auth) repository and follow along with the source code.

8
src/routes/docs/tutorials/nuxt-ssr-auth/step-3/+page.markdoc
View File

@@ -7,7 +7,7 @@ step: 3
Before you can use Appwrite, you need to create the Appwrite `Client` and set the project ID and endpoint.
The client is then used to create services like `Databases` and `Account`, so they all point to the same Appwrite project.
Create a function to build services you need in a file like `src/lib/server/appwrite.js` and **exporting the instances**.
Create a function to build services you need in a file like `server/lib/appwrite.js` and **exporting the instances**.
As part of the function, set the current user's session if they are logged in. This is done by accessing the session cookie from the request and calling the `setSession(session)` with the cookie value.
@@ -25,9 +25,9 @@ export const SESSION_COOKIE = "my-custom-session";
export function createAdminClient() {
const client = new Client()
.setEndpoint(process.env.APPWRITE_ENDPOINT!)
.setProject(process.env.APPWRITE_PROJECT!)
.setKey(process.env.APPWRITE_KEY!);
.setEndpoint(process.env.PUBLIC_APPWRITE_ENDPOINT)
.setProject(process.env.PUBLIC_APPWRITE_PROJECT)
.setKey(process.env.APPWRITE_KEY);
return {
get account() {

12
src/routes/docs/tutorials/nuxt-ssr-auth/step-5/+page.markdoc
View File

@@ -5,7 +5,7 @@ description: Add authentication to a Nuxt project using Appwrite.
step: 5
---
We can now implement our sign up page. Create a `signin.vue` file in the `pages` directory.
We can now implement our sign up page. Create a `signup.vue` file in the `pages` directory.
```vue
<!-- pages/signup.vue -->
@@ -23,21 +23,25 @@ We can now implement our sign up page. Create a `signin.vue` file in the `pages`
</template>
```
This is an HTML form with an email and password input. When the form is submitted, we want to send the email and password to Appwrite to authenticate the user. To use Nuxt form actions we create a `signin.post.js` file in the `server/api` directory:
This is an HTML form with an email and password input. When the form is submitted, we want to send the email and password to Appwrite to authenticate the user. To use Nuxt form actions we create a `signup.post.js` file in the `server/api` directory:
```javascript
// server/api/signup.post.js
import { ID } from "node-appwrite";
import { SESSION_COOKIE, createAdminClient } from "~/server/lib/appwrite";
export default defineEventHandler(async (event) => {
// Extract the form data
const formData = await readFormData(event);
const email = formData.get("email") as string;
const password = formData.get("password") as string;
const email = formData.get("email");
const password = formData.get("password");
// Create the Appwrite client.
const { account } = createAdminClient(event);
// Create a new user with email and password
await account.create(ID.unique(), email, password);
// Create the session using the client
const session = await account.createEmailPasswordSession(email, password);

57
src/routes/docs/tutorials/nuxt-ssr-auth/step-6/+page.markdoc
View File

@@ -5,30 +5,53 @@ description: Add authentication to a Nuxt project using Appwrite.
step: 6
---
Now the end-user is able to sign up, we can create the account page. This page will display basic information about the user, and allow the user to log out. Create a new file in the `pages` directory called `account.vue` and add the following code:
Now the end-user is able to sign up, we can create the account page. This page will display basic information about the user, and allow the user to log out.
To create the account page, we will first need to fetch the user data. We can do this by creating a new API endpoint that retrieves the user information. Create a new `user.get.js` file in the `server/routes/api` directory and add the following code:
```js
// server/routes/api/user.get.js
export default defineEventHandler(async (event) => {
const user = event.context.user;
if (!user) {
return false;
}
return user;
})
```
Create a new file in the `pages` directory called `account.vue` and add the following code:
```vue
<!-- pages/account.vue -->
<script setup>
const { context } = useEvent();
const { user } = context;
// Fetch user data from your API endpoint
const { data: user } = await useFetch('/api/user')
if (user.value === false) {
await navigateTo('/signup')
}
</script>
<template>
<ul>
<li>
<strong>Email:</strong> {{ user.email }}
</li>
<li>
<strong>Name:</strong> {{ user.name }}
</li>
<li>
<strong>ID: </strong> {{ user.$id }}
</li>
</ul>
<form method="post" action="/api/signout">
<button type="submit">Log out</button>
</form>
<div v-if="user">
<ul>
<li>
<strong>Email:</strong> {{ user.email }}
</li>
<li>
<strong>Name:</strong> {{ user.name }}
</li>
<li>
<strong>ID: </strong> {{ user.$id }}
</li>
</ul>
<form method="post" action="/api/signout">
<button type="submit">Log out</button>
</form>
</div>
</template>
```

2
src/routes/docs/tutorials/nuxt-ssr-auth/step-7/+page.markdoc
View File

@@ -46,7 +46,7 @@ The `createOAuth2Token` method redirects the user to the OAuth provider, and the
Handle the callback and create a session for the user. Create a new server route at `server/routes/api/oauth.get.js`.
```js
// server/routes/api/oauth.post.js
// server/routes/api/oauth.get.js
import { SESSION_COOKIE, createAdminClient } from "~/server/lib/appwrite";
export default defineEventHandler(async (event) => {

18
src/routes/docs/tutorials/nuxt-ssr-auth/step-8/+page.markdoc
View File

@@ -1,11 +1,19 @@
---
layout: tutorial
title: All set
title: Enable the sign up and account pages
description: Add authentication to a Nuxt project using Appwrite.
step: 8
---
If you want to see the complete source code with styling, see the [demos-for-vue](https://github.com/appwrite/demos-for-vue/tree/main/server-side-rendering) repository.
For the last step, we must remove the welcome page and enable the pages we have created so far. For that, head to the `app.vue` file, and replace `<NuxtWelcome />` with `<NuxtPage />` so that code looks as follows:
# Other authentication methods {% #other-authentication-methods %}
Appwrite also supports OAuth, passwordless login, anonymous login, and phone login.
Learn more about them in the [authentication guide](https://appwrite.io/docs/products/auth).
```vue
<!-- app.vue -->
<template>
<div>
<NuxtRouteAnnouncer />
<NuxtPage />
</div>
</template>
```
Replacing `<NuxtWelcome />` with `<NuxtPage />` will allow the user to navigate to the pages we have created so far, such as the sign-up and account pages, instead of the default Nuxt welcome page.

11
src/routes/docs/tutorials/nuxt-ssr-auth/step-9/+page.markdoc Normal file
View File

@@ -0,0 +1,11 @@
---
layout: tutorial
title: All set
description: Add authentication to a Nuxt project using Appwrite.
step: 9
---
If you want to see the complete source code with styling, see the [nuxt-ssr-auth](https://github.com/appwrite-community/nuxt-ssr-auth) repository.
# Other authentication methods {% #other-authentication-methods %}
Appwrite also supports OAuth, passwordless login, anonymous login, and phone login.
Learn more about them in the [authentication guide](https://appwrite.io/docs/products/auth).