Adding Auth Flow Using SuperTokens into a React and Hasura GraphQL App

This tutorial will show you how to develop a secure e-commerce store using SuperTokens authentication in a React.js App. We'll use a modern stack that includes React, Hasura GraphQL, and SuperTokens. The source code for the App we're working on is available to view . here By learning how to combine all of these features, you should be able to apply what you've learned here to create your ideas. Understanding the fundamental building blocks allows you to take this knowledge with you and use it in any way you see fit in the future. Using SuperTokens to Authenticate the Hasura endpoint SuperTokens provides authentication, and Hasura exposes a single GraphQL endpoint that you use on the frontend to send GraphQL queries and access data. Because it is a public API by default, SuperTokens will make it secure or private. You will integrate SuperTokens with Hasura. Tokens generated from SuperTokens will be sent from the UI side in request headers to Hasura, where they will be validated. What is SuperTokens? is an open-source AuthO alternative that allows you to set up authentication in less than 30 minutes. SuperTokens Over the last few months, SuperTokens has grown in popularity and adoption among developers in my network. And many of the developers I've talked to about it like the fact that it's open-source. When you start a new project, SuperTokens provides user authentication. From there, you can quickly implement additional features in your App. Why use SuperTokens? SuperTokens is an open-source alternative with the following features: SuperTokens is open source, which means it can be used for free, indefinitely, with no restrictions on the number of users. An on-premises deployment that gives you complete control over your user data by utilizing your database. An all-in-one solution that includes login, signups, user and session management without the complexities of OAuth protocols. Ease of use and increased security. Customizable: Anyone can contribute to the improvement of SuperTokens! What is Hasura? Hasura makes it possible to create a real-time GraphQL API for your application without writing any backend code. Hasura is a GraphQL Engine that converts your database into a real-time, instant GraphQL API. You can also use the Remote Schemas and Actions to integrate your own GraphQL APIs into Hasura. Hasura is a permission-based system. TL;DR Here are the links to quickly access the source code or learn more about both products. Source Code SuperTokens Hasura ngrok Let's get started To get started, first create a new React.js App: npx create-react-app my-app cd my-app npm start To implement SuperTokens Authentication, we have two options. Unlimited users, self-hosted, and free for life Free up to 5K monthly active users on SaaS (hosted by SuperTokens). After that, $29 per month for every 5K users (up to 50K MAUs) Create a managed service with SuperTokens To create a SuperTokens Managed Service, click the blue "Create an App" button, which will take you to an account creation page. Then, by following the instructions, you can select an availability region for your managed service. You'll see the following UI after creating a SuperTokens Managed Service, which contains a default development environment. Set up of the Hasura cloud Hasura can be used in two different ways. You can use it locally with Docker or on Hasura Cloud. Hasura Cloud is used throughout the tutorial. If you're new to Hasura, you'll need to create an account and a project. If you follow this , you should be up and running in no time. guide You should be in the project dashboard after setting up your account and project. Creating/Importing a database in Hasura The first step is to connect the database with Hasura. Next, select the "Connect Database" option as indicated in the image below. This will take you to the database page, where you can connect to an existing database or create one from scratch. This tutorial will connect the database we created using SuperTokens to managed services. After connecting the database, you can access it by clicking on "public," as shown in the figure below. In this blog, I'm connecting Hasura to a SuperTokens cloud database, but in production, SuperTokens doesn't allow the database, so the database should be a separate entity, which is the recommended approach. I'm only using it for this demo app. Using Hasura to make tables Now that you've connected the database, it's time to create the tables. You will create a few more tables in this step: user_cart products user_wishlist merchants orders categories Managing permissions in Hasura Hasura lets you define access control rules at three different levels: Table level, Action level, and Role level are examples of levels. Role-level examples are used in this app. You can find detailed instructions in the documentation link SuperTokens Frontend.init() SuperTokens lets us automatically add request interceptors to save and store tokens for enduring user sessions by initializing them on the frontend. We'll use the pre-built **EmailPassword ** recipe to access the SuperTokens demo app. Let's add the following code block to the top of the index.tsx to initialize the Supertokens client on the React app. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import SuperTokens from 'supertokens-auth-react'; import Session, { SessionAuth } from 'supertokens-auth-react/recipe/session'; import { BrowserRouter } from 'react-router-dom'; import EmailPassword from 'supertokens-auth-react/recipe/emailpassword'; import { getApiDomain, getWebsiteDomain } from './utils/utils'; import App from './App'; import reportWebVitals from './reportWebVitals';

SuperTokens.init({ appInfo: { appName: 'Shopping App', apiDomain: getApiDomain(), websiteDomain: getWebsiteDomain(), }, recipeList: [ EmailPassword.init({ getRedirectionURL: async (context) => { if (context.action === 'SUCCESS') { return '/home'; } return undefined; }, emailVerificationFeature: { mode: 'REQUIRED', }, }), Session.init(), ], }); Our session context can be accessed after wrapping the App() component with the EmailPaswordAuth wrapper. SuperTokens Backend.init() SuperTokens takes care of many things for you and abstracts them away. When calling supertokens.init, we must specify the override config value to override the default implementation. Each recipe in the recipeList has an override config that may be used to alter its behavior. supertokens.init({ framework: 'express', supertokens: { connectionURI: process.env.API_TOKENS_URL, apiKey: process.env.API_KEY, }, appInfo: { appName: 'SuperTokens Demo App', apiDomain, websiteDomain, }, recipeList: [EmailPassword.init({}), Session.init({ jwt: { enable: true, /* * This is an example of a URL that ngrok generates when * you expose localhost to the internet */ issuer: process.env.API_JWT_URL, }, })], }); Learn how to customize SuperTokens APIs . here SuperTokens managed services Architecture The architecture diagram for SuperTokens managed services version 👇 An example of how the three components interact for a sign-in and sign-out flow (using email and password) is shown below Integrating SuperTokens with Hasura The token issuer URL must be added to Hasura env variables to integrate SuperTokens with Hasura. Because we'll be calling the Hasura endpoint from our local, we'll need to expose it to the internet. To do so, we'll use ng-rock, and we'll also need to enable JWT in SuperTokens. ngrok is a well-known tunneling tool that allows you to connect a locally running application to the internet. By clicking , you can get it for free and with all of the functionality you need, as shown in the diagram below. here Follow the documentation, which includes step-by-step instructions, to set up Hasura environment variables. Set up Hasura environment variables Hasura's env variables on the cloud are configured with SuperTokens JWT URls, as shown in the diagram below. recipeList: [EmailPassword.init({}), Session.init({ jwt: { enable: true, /* * This is an example of a URL that ngrok generates when * you expose localhost to the internet */ issuer: process.env.API_JWT_URL, }, REACT_APP_API_PORT=3002 REACT_APP_API_GRAPHQL_URL=https://supertokens.hasura.app/v1/graphql API_KEY=SSugiN8EMGZv=fL33=yJbycgI7UmSd API_TOKENS_URL=https://0def13719ed411ecb83cf5e5275e2536-ap-southeast-1.aws.supertokens.io:3568 API_JWT_URL=http://ec87-223-185-12-185.ngrok.io/auth To send Hasura JWT claims in a SuperTokens-generated token We need to share user role-related information with Hasura for role-based permission. This may be done in the SuperTokens by overriding the existing token, as seen in the code spinet below. override: { functions(originalImplementation) { return { ...originalImplementation, async createNewSession(sessionInput) { const input = sessionInput; input.accessTokenPayload = { ...input.accessTokenPayload, 'https://hasura.io/jwt/claims': { 'x-hasura-user-id': input.userId, 'x-hasura-default-role': 'user', 'x-hasura-allowed-roles': ['user', 'anonymous', 'admin'], }, };

return originalImplementation.createNewSession(input); }, }; }, }, Hasura will validate authorization using the headers listed below. x-hasura-user-id x-hasura-default-role x-hasura-allowed-roles In the UI, how do you use the Hasura endpoint? We're using the apollo/client npm package to access the Hasura GrpahQL endpoint. Adding apollo/client to our app: import React from 'react'; import './App.scss'; import { useSessionContext } from 'supertokens-auth-react/recipe/session'; import { ApolloClient, InMemoryCache, ApolloProvider, } from '@apollo/client'; import AppRoutes from './shared/components/routes/AppRoutes';

export default App; We are sending a token generated by SuperTokens in Authorization: Bearer $accessTokenPayload?.jwt Let's have a look at all of the project dependencies that were used in the development of this app "dependencies": { "@apollo/client": "^3.5.9", "@emotion/react": "^11.8.1", "@emotion/styled": "^11.8.1", "@material-ui/icons": "^4.11.2", "@mui/icons-material": "^5.4.4", "@mui/lab": "^5.0.0-alpha.72", "@mui/material": "^5.4.3", "@mui/styles": "^5.4.4", "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.3", "@testing-library/user-event": "^13.5.0", "@types/express": "^4.17.13", "@types/jest": "^27.4.0", "@types/node": "^16.11.25", "@types/react": "^17.0.39", "@types/react-dom": "^17.0.11", "axios": "^0.26.0", "body-parser": "^1.19.2", "cors": "^2.8.5", "dotenv": "^16.0.0", "graphql": "^16.3.0", "helmet": "^5.0.2", "morgan": "^1.10.0", "nodemon": "^2.0.15", "npm-run-all": "^4.1.5", "prettier": "^2.5.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-router-dom": "^6.2.1", "react-scripts": "5.0.0", "sass": "^1.49.8", "supertokens-auth-react": "^0.18.7", "supertokens-node": "^9.0.0", "typescript": "^4.5.5", "web-vitals": "^2.1.4" }, Let's talk about the React components we built for the E-commerce app. The folder structure in Visual Studio Code looks like this: Create the product list component (ProductList.tsx) This component displays a list of all of the products. import React from 'react'; import Box from '@mui/material/Box'; import Grid from '@mui/material/Grid'; import { useQuery, gql, } from '@apollo/client'; import Skeleton from '@mui/material/Skeleton'; import Card from '@mui/material/Card'; import ProductItem from '../product-item/ProductItem'; import { Product } from '../models/Product'; import useToast from '../../hooks/useToast';

const PRODUCT_LIST = gql`query{products {id category_id merchant_id name price product_img_url status}user_whishlist { product_id }}`;

export default ProductList; Create the product details component (ProductDetails.tsx) When a user clicks on any products on the ProductList page, this component displays all of the product's details and specifications. /* eslint-disable no-unused-vars */ import React, { useEffect, useRef, useState } from 'react'; import Box from '@mui/material/Box'; import Grid from '@mui/material/Grid'; import Card from '@mui/material/Card'; import CardHeader from '@mui/material/CardHeader'; import CardMedia from '@mui/material/CardMedia'; import { makeStyles } from '@mui/styles'; import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart'; import { useQuery, gql, useMutation, } from '@apollo/client'; import CardActions from '@mui/material/CardActions'; import LoadingButton from '@mui/lab/LoadingButton'; import Skeleton from '@mui/material/Skeleton'; import CardContent from '@mui/material/CardContent'; import Typography from '@mui/material/Typography'; import CurrencyRupeeIcon from '@mui/icons-material/CurrencyRupee'; import { useParams, useNavigate } from 'react-router-dom'; import ProductSpecifications from '../product-specifications/ProductSpecifications';

const FETCH_PRODUCT = gql`query getProduct($pid: Int!) { products(where: {id: {_eq: $pid}}) { category_id id merchant_id name price product_img_url status descriptions } user_cart(where: {product_id: {_eq: $pid}}) { product_id } }

`;

const ADD_TO_CART = gql`mutation addToCart($pid: Int!, $price: Int!) { insert_user_cart_one(object: {product_id: $pid, price: $price}) { product_id } } `;

const useStyles: any = makeStyles(() => ({ productImg: { height: '416px', width: '200px', marginLeft: 'auto', marginRight: 'auto', padding: '10px', }, addtoCartBtn: { backgroundColor: '#ff9f00', fontWeight: 'bold', fontSize: '16px', }, buyNowBtn: { backgroundColor: '#fb641b', fontWeight: 'bold', fontSize: '16px', }, textLeft: { textAlign: 'left', }, offerHeader: { fontSize: '16px', fontWeight: '500', color: '#212121', textAlign: 'left', }, offerList: { textAlign: 'left', lineHeight: '1.43', paddingLeft: '0', }, specHeader: { fontSize: '24px', fontWeight: '500', lineHeight: '1.14', textAlign: 'left', color: '#212121', }, cardWrapper: { padding: '20px', }, currencyTxt: { fontSize: '28px', textAlign: 'left', fontWeight: 'bold', }, offerImg: { height: '18px', width: '18px', position: 'relative', top: '6px', marginRight: '10px', }, offerListWrapper: { listStyle: 'none', }, pb0: { paddingBottom: '0', }, currIcon: { position: 'relative', top: '5px', fontWeight: 'bold', fontSize: '28px', }, cardActions: { display: 'flex', justifyContent: 'center', }, productCard: { cursor: 'pointer', }, }));

export default function ProductDetails() { const { pid } = useParams(); const { loading, data, error } = useQuery(FETCH_PRODUCT, { variables: { pid, }, }); const [addToCart, { loading: AddLoader, data: AddData, error: AddError, }] = useMutation(ADD_TO_CART); const product = data?.products[0]; const [addToCartLoader, setAddToCartLoader] = useState(false); const classes = useStyles(); const [cartBtnTxt, setCartBtnTxt] = useState('ADD TO CART'); const navigate = useNavigate(); useEffect(() => { setCartBtnTxt(data?.user_cart.length > 0 ? 'GO TO CART' : 'ADD TO CART'); }, [data]); const addToCartHandler = async () => { if (data?.user_cart.length > 0) { navigate('/cart'); } else { setCartBtnTxt('GOING TO CART'); setAddToCartLoader(true); await addToCart({ variables: { pid, price: product.price, }, }); navigate('/cart'); } }; return ( {!loading ? ( ) : } {!loading ? ( <> } onClick={addToCartHandler} > {cartBtnTxt} BUY NOW ) : ( <> )}

{!loading ? : } {!loading ? ( <> {product?.price} {product?.descriptions?.offers?.length > 0 && ( Available Offers

{ product?.descriptions?.offers.map((item: string) => ( {item} )) } ) } Specifications

) : } ); } Create the cart list component (CartList.tsx) This component displays a list of the products you have added to your cart. /* eslint-disable no-unused-vars */ import React from 'react'; import Box from '@mui/material/Box'; import Grid from '@mui/material/Grid'; import Card from '@mui/material/Card'; import CardHeader from '@mui/material/CardHeader'; import CardContent from '@mui/material/CardContent'; import { useQuery, gql, } from '@apollo/client'; import Skeleton from '@mui/material/Skeleton'; import Button from '@mui/material/Button'; import { useNavigate } from 'react-router-dom'; import CartItem from '../cart-item/CartItem'; import PriceDetails from '../price-details/PriceDetails'; // import CardMedia from '@mui/material/CardMedia'; const PRODUCTS_IN_CART = gql`query getProductsInCart { user_cart { cartProducts { category_id name price product_img_url id } price discount } }

`; export default function CartList() { const { data, loading, error, refetch, } = useQuery(PRODUCTS_IN_CART); const navigate = useNavigate();

const refereshCart = () => { refetch(); }; if (!loading && data.user_cart.length === 0) { return ( Your Cart is empty

navigate('/home')}>Shop Now ); } return ( {!loading ? ( <> {data.user_cart.map((item: any) => ( ))} ) : } {!loading ? ( ) : } ); } Create the price details component (PriceDetails.tsx) This component displays the price calculation for all of the products that are currently in the shopping cart. import React from 'react'; import { makeStyles } from '@mui/styles';

const useStyles = makeStyles({ detailsHeader: { fontSize: '24px', fontWeight: '500', textAlign: 'left', color: '#878787', borderBottom: '1px solid #efefef', padding: '16px', }, prcieWrapper: { display: 'flex',

}, priceContent: { width: '50%', padding: '16px', textAlign: 'left', fontSize: '22px', }, });

export default function PriceDetails({ priceDetails }: { priceDetails: any}) { const classes = useStyles(); const total = priceDetails.reduce((prev: any, curr: any) => ({ price: prev.price + curr.price, discount: prev.discount + curr.discount, })); return ( PRICE DETAILS Price {total.price} Discount - {total.discount} Delivery Charges - Total Amount {Number(total.price) - Number(total.discount)}

); } Finally, this is how the app will appear once you sign in. If you have any problems implementing the workflow after reading this article, don't hesitate to get in touch with me on or ping your questions to the SuperTokens channel. Twitter Discord Conclusion That was the end of this blog. A big thank you to the SuperTokens team for spearheading this excellent open-source authentication project and developing this integration functionality with Hasura. This project's final code can be found . here Today, I hope you learned something new and if you did, please like/share it so that others can see it. Thank you for being a regular reader; you're a big part of why I've been able to share my life/career experiences with you. Let me know how you plan to use SuperTokens in your next project. For the most up-to-date information, follow on Twitter. SuperTokens Also Published here