Merge pull request #1397 from appwrite/react-protected-routes-blog

React protected routes blog

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, you should be redirected to the login page.
+
+# 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)