diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c2dc4555f..23b778923 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,7 +29,7 @@ importers: version: 0.26.0 '@appwrite.io/repo': specifier: github:appwrite/appwrite#main - version: https://codeload.github.com/appwrite/appwrite/tar.gz/72087298056c5db3dca81d2ca66725dcf47d41bb + version: https://codeload.github.com/appwrite/appwrite/tar.gz/45e5509113f568190c66d491aa1145069c6d124c '@eslint/compat': specifier: ^1.2.7 version: 1.2.7(eslint@9.22.0(jiti@2.4.2)) @@ -296,8 +296,8 @@ packages: '@appwrite.io/pink@0.26.0': resolution: {integrity: sha512-iPeGE56pauzxuIXt15ZswjKCErwp3QdF3XOlJZfyYY7J2nirra85JNTL+3lWuFIf8yYWL7NbvCjhf8ig79TgwA==} - '@appwrite.io/repo@https://codeload.github.com/appwrite/appwrite/tar.gz/72087298056c5db3dca81d2ca66725dcf47d41bb': - resolution: {tarball: https://codeload.github.com/appwrite/appwrite/tar.gz/72087298056c5db3dca81d2ca66725dcf47d41bb} + '@appwrite.io/repo@https://codeload.github.com/appwrite/appwrite/tar.gz/45e5509113f568190c66d491aa1145069c6d124c': + resolution: {tarball: https://codeload.github.com/appwrite/appwrite/tar.gz/45e5509113f568190c66d491aa1145069c6d124c} version: 0.0.0 '@asamuzakjp/css-color@3.2.0': @@ -311,28 +311,28 @@ packages: resolution: {integrity: sha512-JqWH1vsgdGcw2RR6VliXXdA0/59LttzlU8UlRT/iUUsEeWfYq8I+K0yhihEUTTHLRm1EXvpsCx3083EU15ecsA==} engines: {node: '>=18'} - '@csstools/css-calc@2.1.3': - resolution: {integrity: sha512-XBG3talrhid44BY1x3MHzUx/aTG8+x/Zi57M4aTKK9RFB4aLlF3TTSzfzn8nWVHWL3FgAXAxmupmDd6VWww+pw==} + '@csstools/css-calc@2.1.4': + resolution: {integrity: sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==} engines: {node: '>=18'} peerDependencies: - '@csstools/css-parser-algorithms': ^3.0.4 - '@csstools/css-tokenizer': ^3.0.3 + '@csstools/css-parser-algorithms': ^3.0.5 + '@csstools/css-tokenizer': ^3.0.4 - '@csstools/css-color-parser@3.0.9': - resolution: {integrity: sha512-wILs5Zk7BU86UArYBJTPy/FMPPKVKHMj1ycCEyf3VUptol0JNRLFU/BZsJ4aiIHJEbSLiizzRrw8Pc1uAEDrXw==} + '@csstools/css-color-parser@3.0.10': + resolution: {integrity: sha512-TiJ5Ajr6WRd1r8HSiwJvZBiJOqtH86aHpUjq5aEKWHiII2Qfjqd/HCWKPOW8EP4vcspXbHnXrwIDlu5savQipg==} engines: {node: '>=18'} peerDependencies: - '@csstools/css-parser-algorithms': ^3.0.4 - '@csstools/css-tokenizer': ^3.0.3 + '@csstools/css-parser-algorithms': ^3.0.5 + '@csstools/css-tokenizer': ^3.0.4 - '@csstools/css-parser-algorithms@3.0.4': - resolution: {integrity: sha512-Up7rBoV77rv29d3uKHUIVubz1BTcgyUK72IvCQAbfbMv584xHcGKCKbWh7i8hPrRJ7qU4Y8IO3IY9m+iTB7P3A==} + '@csstools/css-parser-algorithms@3.0.5': + resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==} engines: {node: '>=18'} peerDependencies: - '@csstools/css-tokenizer': ^3.0.3 + '@csstools/css-tokenizer': ^3.0.4 - '@csstools/css-tokenizer@3.0.3': - resolution: {integrity: sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw==} + '@csstools/css-tokenizer@3.0.4': + resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==} engines: {node: '>=18'} '@emnapi/runtime@1.3.1': @@ -4252,14 +4252,14 @@ snapshots: normalize.css: 8.0.1 the-new-css-reset: 1.11.3 - '@appwrite.io/repo@https://codeload.github.com/appwrite/appwrite/tar.gz/72087298056c5db3dca81d2ca66725dcf47d41bb': {} + '@appwrite.io/repo@https://codeload.github.com/appwrite/appwrite/tar.gz/45e5509113f568190c66d491aa1145069c6d124c': {} '@asamuzakjp/css-color@3.2.0': dependencies: - '@csstools/css-calc': 2.1.3(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3) - '@csstools/css-color-parser': 3.0.9(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3) - '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3) - '@csstools/css-tokenizer': 3.0.3 + '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-color-parser': 3.0.10(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 lru-cache: 10.4.3 optional: true @@ -4270,26 +4270,26 @@ snapshots: '@csstools/color-helpers@5.0.2': optional: true - '@csstools/css-calc@2.1.3(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)': + '@csstools/css-calc@2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)': dependencies: - '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3) - '@csstools/css-tokenizer': 3.0.3 + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 optional: true - '@csstools/css-color-parser@3.0.9(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)': + '@csstools/css-color-parser@3.0.10(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)': dependencies: '@csstools/color-helpers': 5.0.2 - '@csstools/css-calc': 2.1.3(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3) - '@csstools/css-parser-algorithms': 3.0.4(@csstools/css-tokenizer@3.0.3) - '@csstools/css-tokenizer': 3.0.3 + '@csstools/css-calc': 2.1.4(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4) + '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) + '@csstools/css-tokenizer': 3.0.4 optional: true - '@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3)': + '@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)': dependencies: - '@csstools/css-tokenizer': 3.0.3 + '@csstools/css-tokenizer': 3.0.4 optional: true - '@csstools/css-tokenizer@3.0.3': + '@csstools/css-tokenizer@3.0.4': optional: true '@emnapi/runtime@1.3.1': diff --git a/src/routes/docs/tutorials/nuxt-ssr-auth/step-1/+page.markdoc b/src/routes/docs/tutorials/nuxt-ssr-auth/step-1/+page.markdoc index 74861d400..a6424a788 100644 --- a/src/routes/docs/tutorials/nuxt-ssr-auth/step-1/+page.markdoc +++ b/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. \ No newline at end of file +Clone the [nuxt-ssr-auth](https://github.com/appwrite-community/nuxt-ssr-auth) repository and follow along with the source code. \ No newline at end of file diff --git a/src/routes/docs/tutorials/nuxt-ssr-auth/step-3/+page.markdoc b/src/routes/docs/tutorials/nuxt-ssr-auth/step-3/+page.markdoc index 6c7254097..8d9560dd4 100644 --- a/src/routes/docs/tutorials/nuxt-ssr-auth/step-3/+page.markdoc +++ b/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() { diff --git a/src/routes/docs/tutorials/nuxt-ssr-auth/step-5/+page.markdoc b/src/routes/docs/tutorials/nuxt-ssr-auth/step-5/+page.markdoc index 4da36ea71..d71a35d77 100644 --- a/src/routes/docs/tutorials/nuxt-ssr-auth/step-5/+page.markdoc +++ b/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 @@ -23,21 +23,25 @@ We can now implement our sign up page. Create a `signin.vue` file in the `pages` ``` -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); diff --git a/src/routes/docs/tutorials/nuxt-ssr-auth/step-6/+page.markdoc b/src/routes/docs/tutorials/nuxt-ssr-auth/step-6/+page.markdoc index a36ad4687..960c4f3fb 100644 --- a/src/routes/docs/tutorials/nuxt-ssr-auth/step-6/+page.markdoc +++ b/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 ``` diff --git a/src/routes/docs/tutorials/nuxt-ssr-auth/step-7/+page.markdoc b/src/routes/docs/tutorials/nuxt-ssr-auth/step-7/+page.markdoc index bfc1f3161..6590b04bc 100644 --- a/src/routes/docs/tutorials/nuxt-ssr-auth/step-7/+page.markdoc +++ b/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) => { diff --git a/src/routes/docs/tutorials/nuxt-ssr-auth/step-8/+page.markdoc b/src/routes/docs/tutorials/nuxt-ssr-auth/step-8/+page.markdoc index 96b2a5574..f7b125873 100644 --- a/src/routes/docs/tutorials/nuxt-ssr-auth/step-8/+page.markdoc +++ b/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 `` with `` 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 + + +``` + +Replace `` with `` 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. \ No newline at end of file diff --git a/src/routes/docs/tutorials/nuxt-ssr-auth/step-9/+page.markdoc b/src/routes/docs/tutorials/nuxt-ssr-auth/step-9/+page.markdoc new file mode 100644 index 000000000..6584b14d3 --- /dev/null +++ b/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).