📚 Documentation: Deep dive authentication recipe with Next.js

[gewenyu99]

💭 Description

Goal

Deep dive tutorial for beginners to learn Appwrite Authentication in depth with Next.js.

Content

1. The end product should be a functional app with auth screens.
2. Step by step from setup. If there will be test data, provide a Server SDK script with instructions.
3. Format should be similar to /docs/tutorials/sveltekit
4. Should contain the following content
   1. Sign up
   2. Log in
   3. Verification
   4. Recovery
   5. Conditional routing based on auth state
   6. Preferences
   7. Delete account

How to contribute

Pitch an outline detailing each page you plan to add and headings within, and ask to be assigned. Open a PR after the outline has been approved.

The Appwrite team will collaborate with you on the outline and PR.

Thanks for taking the time to make our documentation better 🙏

👀 Have you spent some time to check if this issue has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

[Nishantjain10]

Hey @gewenyu99 and @Haimantika, I would like to contribute to this issue! Here's the detailed outline for the docs!

Outline: Deep Dive Authentication Recipe with Next.js Documentation

1. Introduction

• Brief overview of the tutorial's purpose and what readers can expect.
• Mention the goal of creating a functional authentication app with Next.js and Appwrite.

2. Prerequisites

• List the prerequisites for following this tutorial, including software, libraries, and accounts required.

3. Setting Up the Next.js Project

• Detailed step-by-step instructions on how to create a Next.js project.
• Installation of necessary dependencies.
• Configuration steps specific to Next.js and Appwrite integration.

4. Creating the Sign-up Page

• Step-by-step guide to creating the Sign-up page.
• Code snippets and explanations for implementing user registration with Appwrite.

5. Implementing the Login Page

• Detailed instructions for creating the Login page.
• Code examples and explanations for user login with Appwrite.

6. User Verification

• Walkthrough for implementing email verification for newly registered users.
• Code snippets and explanations for verifying user accounts.

7. Password Recovery

• Step-by-step guide on how to implement password recovery functionality.
• Code examples for handling password reset requests.

8. Conditional Routing Based on Authentication State

• Explanation of how to set up routing logic based on user authentication status.
• Code examples for handling authenticated and unauthenticated routes.

9. User Preferences

• Creating a user profile page for updating user preferences.
• Code snippets and explanations for managing user profile data.

10. Account Deletion

• Instructions for implementing account deletion functionality.
• Code examples and explanations for allowing users to delete their accounts.

11. Testing and Deployment

• Guidance on testing the application.
• Steps for deploying the Next.js application with authentication features.

12. Conclusion

• Summarize what readers have learned in the tutorial.
  - Encourage further exploration and contributions.

13. How to Contribute

• Explain how readers can contribute to the documentation.

14. Troubleshooting

• Common issues users might face and how to resolve them.

15. Additional Resources

• Links to related documentation, resources, and further reading.

Here is my past work, that I've done for appwrite:

Blogs:

• The Ultimate Guide to Setting up an App with Appwrite Cloud: A Step by Step Guide.
• One-Click Droplets: Easy Appwrite Setup on DigitalOcean.
• Setting Up Appwrite with Docker Locally.

Video

• Mastering Appwrite & AuthUI: Create a Stunning Login Form in Minutes!
  

PS. Also, made a lot of memes in discord xd!

[Nishantjain10]

Hey, any updates @Haimantika @gewenyu99?

[gewenyu99]

@Nishantjain10 What will you be using for routing?

[gewenyu99]

I would suggest revising your tutorial to be a smaller scope, closer to the suggested set of content :)

[suryanshsoni120]

If the issue hasn't been resolved, I would like to work on this. Can you assign it to me?

[Nishantjain10]

Hey, I've already started working on it!

If the issue hasn't been resolved, I would like to work on this. Can you assign it to me?

[gewenyu99]

@Nishantjain10 can you make sure the contents covered are:

• Sign up
• Log in
• Verification
• Recovery
• Conditional routing based on auth state
• Preferences
• Delete account

Thanks!

[Gilbishkosma]

hi @gewenyu99 @Haimantika , i want to contribute to this one, you can assign it to me if no one else is working on it, thanks.

[gewenyu99]

I decided to do an example project, this way all the guides can be consistent. Please follow the outline and format here:
#89

[hey-nicolasklein]

@gewenyu99 @Haimantika hey DevRel could you make sure to use the new App Router for the tutorial? I'm currently searching for a reliable way to integrate authentication with the new App Router, and for React Server Components as well as Client Components. Could you make sure to touch that topic in the guide 🙏

Supabase has a few tutorials online, but they define custom auth helpers to work with the React Server Components and React Client Components.

[Haimantika]

@Nishantjain10 do you have an update?Will have to reassign the issue to the next person due to inactivity from your end

[Nishantjain10]

@Nishantjain10 do you have an update?Will have to reassign the issue to the next person due to inactivity from your end

Hey, sorry, I had some problem with my laptop. I'm working on it.

[gewenyu99]

@gewenyu99 @Haimantika hey DevRel could you make sure to use the new App Router for the tutorial? I'm currently searching for a reliable way to integrate authentication with the new App Router, and for React Server Components as well as Client Components. Could you make sure to touch that topic in the guide 🙏

Supabase has a few tutorials online, but they define custom auth helpers to work with the React Server Components and React Client Components.

I'll tag you for review 😆 I'm more of a Svelte/Vue person than Next.js.

Thanks for the suggestion :)

[Nishantjain10]

@gewenyu99 @Haimantika hey DevRel could you make sure to use the new App Router for the tutorial? I'm currently searching for a reliable way to integrate authentication with the new App Router, and for React Server Components as well as Client Components. Could you make sure to touch that topic in the guide 🙏

Supabase has a few tutorials online, but they define custom auth helpers to work with the React Server Components and React Client Components.

Sure I will keep that in mind, going to use app router only!

[Nishantjain10]

Hey @gewenyu99, would it be okay if I use Tailwind CSS or custom CSS to improve the design of the login form?

[gewenyu99]

@Nishantjain10 I would rather have no CSS than tailwind. It's unrelated and unnecessary complexity.