Merge branch 'main' into doc-oauth-docs-change-same-site-cookie

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

@@ -4,7 +4,7 @@ title: All set
 description: Add authentication to a Next.js project using Appwrite.
 step: 8
 ---
-If you want to see the complete source code with styling, see the [demos-for-react](https://github.com/appwrite/demos-for-react/tree/main/nextjs/server-side-rendering) repository.
+If you want to see the complete source code with styling, see the [demos-for-react](https://github.com/appwrite/demos-for-react/tree/master/nextjs/server-side-rendering) repository.
 
 # Other authentication methods {% #other-authentication-methods %}
 Appwrite also supports OAuth, passwordless login, anonymous login, and phone login. 

src/routes/docs/tutorials/react/step-2/+page.markdoc

@@ -10,7 +10,7 @@ step: 2
 Create a React app with the `npm create` command.
 
 ```sh
-npm create vite@latest --template react ideas-tracker && cd ideas-tracker
+npm create vite@latest -- --template react ideas-tracker && cd ideas-tracker
 ```
 
 # Add dependencies {% #add-dependencies %}

src/routes/docs/tutorials/react/step-3/+page.markdoc

@@ -54,4 +54,4 @@ client
 
 export const account = new Account(client);
 export const databases = new Databases(client);
-```
+```

src/routes/docs/tutorials/react/step-4/+page.markdoc

@@ -29,6 +29,7 @@ export function UserProvider(props) {
   async function login(email, password) {
     const loggedIn = await account.createEmailPasswordSession(email, password);
     setUser(loggedIn);
+    window.location.replace("/"); // you can use different redirect method for your application
   }
 
   async function logout() {
@@ -182,5 +183,4 @@ export function Login() {
     </section>
   );
 }
-```
-
+```

src/routes/docs/tutorials/react/step-6/+page.markdoc

@@ -5,7 +5,7 @@ description: Add a database to your React application using Appwrite Web SDK.
 step: 6
 ---
 # Create collection {% #create-collection %}
-In Appwrite, data is stored as a collection of documents. Create a collection in the [Appwrite Console](https://cloud.appwrite.io/) to store our ideas.
+In Appwrite, data is stored as a collection of documents. Create a collection in the [Appwrite Console](https://cloud.appwrite.io/) to store our ideas. 
 
 {% only_dark %}
 ![Create project screen](/images/docs/tutorials/dark/idea-tracker-collection.png)
@@ -14,12 +14,26 @@ In Appwrite, data is stored as a collection of documents. Create a collection in
 ![Create project screen](/images/docs/tutorials/idea-tracker-collection.png)
 {% /only_light %}
 
+## Attributes
+
 Create a new collection with the following attributes:
-| Field       | Type   | Required |
-|-------------|--------|----------|
-| userId      | String | Yes      |
-| title       | String | Yes      |
-| description | String | No       |
+| Field       | Type   | Required | Size   |
+|-------------|--------|----------|--------|
+| userId      | String | Yes      |  50    |
+| title       | String | Yes      |  25    |
+| description | String | No       |  100   |
+
+# Configure permissions {% #configure-permissions %}
+{% only_dark %}
+![Collection permissions screen](/images/docs/tutorials/dark/idea-tracker-permissions.png)
+{% /only_dark %}
+{% only_light %}
+![Collection permissions screen](/images/docs/tutorials/idea-tracker-permissions.png)
+{% /only_light %}
+
+Navigate to the **Settings** tab of your collection, add the role **Any** and check the **Read** box.
+Next, add a **Users** role and give them access to **Create** by checking those boxes.
+These permissions apply to all documents in your new collection.
 
 # Ideas context {% #ideas-context %}
 
@@ -79,4 +93,3 @@ export function IdeasProvider(props) {
   );
 }
 ```
-

src/routes/docs/tutorials/react/step-7/+page.markdoc

@@ -78,4 +78,30 @@ export function Home() {
     </>
   );
 }
+```
+
+In `src/App.jsx`, wrap the `main` element with the `IdeaProvider` component.
+
+```client-web
+import { Login } from "./pages/Login";
+import { Home } from "./pages/Home";
+import { UserProvider } from "./lib/context/user";
+import { IdeaProvider } from "./lib/context/ideas";
+
+function App() {
+  const isLoginPage = window.location.pathname === "/login";
+
+  return (
+    <div>
+      <UserProvider>
+        <IdeaProvider>
+          <Navbar /> {/* Add the navbar before page content */}
+          <main>{isLoginPage ? <Login /> : <Home />}</main>
+        </IdeaProvider>
+      <UserProvider>
+    </div>
+  );
+}
+
+export default App;
 ```

src/routes/docs/tutorials/vue/step-3/+page.markdoc

@@ -31,7 +31,7 @@ You can skip optional steps.
 
 # Initialize Appwrite SDK {% #init-sdk %}
 
-To use Appwrite in our Svelte app, we'll need to find our project ID. Find your project's ID in the **Settings** page. 
+To use Appwrite in our Vue app, we'll need to find our project ID. Find your project's ID in the **Settings** page. 
 
 {% only_dark %}
 ![Project settings screen](/images/docs/quick-starts/dark/project-id.png)
@@ -53,4 +53,4 @@ client
 
 export const account = new Account(client);
 export const databases = new Databases(client);
-```
+```