Merge pull request #2062 from appwrite/update-nuxt-auth-tutorial

Fix Nuxt SSR Auth tutorial

Author: adityaoberai

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

@@ -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.

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

@@ -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 the 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() {

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

@@ -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);
 

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

@@ -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.
+
+Before creating the account page, the route should fetch the user data. 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>
 ```
 

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

@@ -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) => {

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

@@ -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>
+```
+
+Replace `<NuxtWelcome />` with `<NuxtPage />` to allow the user to navigate to the pages created so far, such as the sign-up and account pages, instead of the default Nuxt welcome page.

src/routes/docs/tutorials/nuxt-ssr-auth/step-9/+page.markdoc

@@ -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).