React protected routes blog

<!--
Thank you for sending the PR! We appreciate you spending the time to work on these changes.

Help us understand your motivation by explaining why you decided to make this change.

You can learn more about contributing to appwrite here: https://github.com/appwrite/appwrite/blob/master/CONTRIBUTING.md

Happy contributing!

-->

## What does this PR do?

(Provide a description of what this PR does.)

## Test Plan

(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work.)

## Related PRs and Issues

(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)

### Have you read the [Contributing Guidelines on issues](https://github.com/appwrite/appwrite/blob/master/CONTRIBUTING.md)?

(Write your answer here.)

src/routes/blog/post/react-protected-routes/+page.markdoc

@@ -0,0 +1,79 @@
+---
+layout: post
+title: Setting up protected routes in React
+description: Learn how to set up protected routes in React in this easy tutorial.
+date: 2024-10-02
+cover: /images/blog/react-protected-routes/cover.png
+timeToRead: 4
+author: dennis-ivy
+category: tutorial
+featured: false
+---
+In this tutorial, we will explore a straightforward method for implementing protected routes in a React application. The aim is to ensure that users can only access certain pages, such as home and profile, after passing an authentication check. If a user is not authenticated, they will be redirected to the login page.
+
+# React protected routes
+
+To accomplish this, we will create a component called `ProtectedRoutes` that wraps around any routes that need protection. This setup allows us to run an authentication check before rendering these pages. Here are the steps.
+
+**Creating the component**
+
+First, create a new file named `ProtectedRoutes.jsx`. In this file, you will import `Outlet` and `Navigate` from React Router Dom. `Outlet` allows for rendering nested routes, while `Navigate` will be used to redirect our users if they are not authenticated.
+
+Below is a basic structure for the `ProtectedRoutes` component:
+
+```jsx
+
+import { Outlet, navigate } from 'react-router-dom';
+
+const ProtectedRoutes = () => {
+    const user = null; // Simulate an unauthenticated user
+    return user ? <Outlet /> : <Navigate to="/login"/> // Redirect to login if not authenticated
+
+export default ProtectedRoutes;
+
+```
+
+**Integrating the component into your app**
+
+With the `ProtectedRoutes` component created, the next step is to wrap the routes we want to protect. We can nest all child routes by using the standard  `<Route>` component and by passing in `<ProtectedRoutes/>` as the element into the parent route.
+
+```jsx
+//App.jsx
+...
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import ProtectedRoutes from './utils/ProtectedRoutes';
+
+function App()｛
+		return
+		<BrowserRouter>
+			<Routes>
+				<Route element=｛<Login/>｝ path="/login"'/>
+
+				{/* 👇 Wrap your protected routes */}
+				<Route element={<ProtectedRoutes/>}>
+						＜Route element=｛<Home/>｝ path="/"/＞
+						＜Route element= ｛<Profile/>｝ path="/profile"/>
+				</Route>	
+
+			</Routes>
+		</BrowserRouter>
+}
+
+```
+
+**Understanding the flow**
+
+When a user attempts to access `/home` or `/profile`, the `ProtectedRoutes` component checks if a user is authenticated. If the user exists, the corresponding component uses `Outlet` to allow routing to continue down to the nested routes.. If not, the user is redirected to the login page.
+
+# Testing your setup
+
+After completing the setup, it’s important to test the application. Try navigating to the protected routes. If authentication has not been established, the redirection to the login page should occur.
+
+# Conclusion
+
+In summary, you have implemented protected routes in your React application. By creating a dedicated component to manage authentication checks, you can ensure that only authorized users gain access to specific pages. This method provides a clear and efficient way to handle route protection in your application. Check out some more React resources below:
+
+- [Protected routes in React video tutorial](https://www.youtube.com/watch?v=pyfwQUc5Ssk)
+- [React quick start with Appwrite](https://appwrite.io/docs/quick-starts/react-native)
+- [Set up Google auth in React](https://appwrite.io/blog/post/set-up-google-auth-appwrite-react)
+- [Build a cross-platform application in React Native](https://appwrite.io/blog/post/building-cross-platform-applications-with-react-native)