Merge pull request #912 from appwrite/feat-expand-auth-quickstart

Improve account overview page

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

@@ -12,7 +12,7 @@ You can use a context and a custom hook to manage our user's data.
 
 Create a new file `contexts/UserContext.jsx` and add the following code to it.
 
-```js
+```client-react-native
 import { ID } from "react-native-appwrite";
 import { createContext, useContext, useEffect, useState } from "react";
 import { account } from "../lib/appwrite";
@@ -76,7 +76,7 @@ For a better user experience, display toasts when the users perform an action, s
 
 We can do this by creating a new file `lib/toast.js` and adding the following code to it.
 
-```js
+```client-react-native
 import { ToastAndroid, Platform, AlertIOS } from 'react-native';
 
 export function toast(msg) {
@@ -93,7 +93,7 @@ Create a new file `views/Login.jsx` and add the following code to it.
 this page contains a basic form to allow the user to login or register.
 Notice how this page consumes the `useUser` hook to access the user's data and perform login and register actions.
 
-```js
+```client-react-native
 import React, { useState } from 'react';
 import { View, Text, TextInput, Button, StyleSheet } from 'react-native';
 import { useUser } from '../contexts/UserContext';

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

@@ -12,7 +12,7 @@ Based on the user's login status, you'll redirect them to the login page or the
 Create a new file `views/Home.jsx` and add the following stub code to it.
 We'll update this page later to display the ideas posted by other users and allow the user to post their ideas.
 
-```js
+```client-react-native
 import React from 'react';
 import { View, Text } from 'react-native';
 import { useUser } from '../contexts/UserContext';
@@ -37,7 +37,7 @@ To handle basic routing, you can use the `react-navigation` library.
 This router also consumes the `UserContext` to determine if the user is logged in or not to redirect the user automatically.
 
 Create a file `lib/Router.jsx` and add the following code to it.  
-```js
+```client-react-native
 import { NavigationContainer } from '@react-navigation/native';
 import LoginScreen from '../views/Login';
 import HomeScreen from '../views/Home';
@@ -72,7 +72,7 @@ export function Router() {
 
 We'll display this router in the `App.js` file.
 
-```js
+```client-react-native
 
 import { StyleSheet, Text, View } from 'react-native';
 import { UserProvider } from './contexts/UserContext';

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

@@ -45,7 +45,7 @@ Now that you have a collection to hold ideas, we can read and write to it from o
 Like you did with the user data, we will create a React context to hold our ideas.
 Create a new file `contexts/IdeasContext.jsx` and add the following code to it.
 
-```js
+```client-react-native
 import { ID, Permission, Role, Query } from "react-native-appwrite";
 import { createContext, useContext, useEffect, useState } from "react";
 import { databases } from "../lib/appwrite";
@@ -108,7 +108,7 @@ This permission ensures that only the user who created the idea can modify it.
 
 Remeber to add the `IdeasProvider` to your `App.js` file.
 
-```js
+```client-react-native
 
 import { StyleSheet, Text, View } from 'react-native';
 import { UserProvider } from './contexts/UserContext';

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

@@ -13,7 +13,7 @@ that only the owner of the idea can remove it.
 
 Overwrite the contents of `views/Home.jsx` with the following:
 
-```js
+```client-react-native
 import React, { useState } from 'react';
 import { View, Text, TextInput, Button, StyleSheet, ScrollView } from 'react-native';
 import { useUser } from '../contexts/UserContext';