Handl Health is a healthcare price transparency platform

Handl Health

handlhealth

Hi guys! In the article today, we'll discuss, and I'll also show you how to set up NextJS 13 (with app folder), , and sub-domains. Auth0 I'm currently working on a web multi-tenancy app. So, we need multiple sub-domains. For security reasons, we decided to use Auth0. We did follow the basic setup for Auth0, which can be found . And everything worked smoothly and fine. But, we figured out that we need multiple sub-domains. So, I started researching, and I got into a lot of trouble with this because every time I entered I got an error. Something about etc. I can't reproduce the error now, but the status code was 400. here subdomain.domain.com err callback, grant_type, Anyway, after a lot of research, a colleague of mine has found that we need to create our SDK. If you followed the basic quickstart from Auth0, you should have something like // src/api/auth/[auth0]/route.ts
import { NextResponse, NextRequest } from 'next/server';
import { handleAuth } from '@auth0/nextjs-auth0';

export const GET = (req: NextRequest, res: NextResponse) => {
  return handleAuth()(req, res); // not neccesary to have (req, res)
}; And beside of that, in our case, we had a middleware to set the user token from Auth0 You can ignore the first if statement for as we needed it for other checks in deployments. It is the only route on the application which doesn't require authentification. /api/status // src/middleware.ts

import { NextRequest, NextResponse } from ‘next/server’;
import {
  withMiddlewareAuthRequired,
  getSession,
} from ‘@auth0/nextjs-auth0/edge’;

export default withMiddlewareAuthRequired(async (req: NextRequest) => {
  if (req.nextUrl.pathname === ‘/api/status’) {
    return NextResponse.next();
  }

  const res = NextResponse.next();
  const user = await getSession(req, res);
  if (user) {
    // set your user.token whenever you want, db, cookies, localStorage etc
    return res;
  }
  return res;
});
export const config = {
  matcher: ‘/’,
}; So basically, with this setup, the login/logout was working fine. domain.com Now, as I mentioned earlier, my colleague found out we have to create our own and we have to simulate a domain name. , Auth0 SDK The following configuration is for macOS and Linux. If you use Windows, use a Google search such as: how to add sub domains local windows So, open your terminal and run: $ sudo nano /etc/host Here, you have to add a root domain and a few subdomains the name will not matter, but the extension, yes. So they can be anything but need to end with . .local 127.0.0.1    cloudstar.local
127.0.0.1    apple.cloudstar.local
127.0.0.1    microsoft.cloudstar.local
127.0.0.1    github.cloudstar.local After you finish, click then press and CTRL + X Y enter Now you need to flush it in the terminal run $ sudo killall -HUP mDNSResponder So now, in Auth0 Dashboard at your application settings, you'll have to set the: * Please note that before Cloudstar.local there's a (dot) . Allowed callbacks urls to: http://.cloudstar.local:3000/api/auth/callback Allowed logout urls to: http://.cloudstar.local:3000 // src/lib/auth0.ts
import { initAuth0 } from '@auth0/nextjs-auth0';

export const initializeAuth0 = (req): ReturnType<typeof initAuth0> => {
  return initAuth0({
    baseURL: `http://${req.headers.get('host')}`, 
    secret: process.env.AUTH0_SECRET,
    issuerBaseURL: process.env.AUTH0_ISSUER_BASE_URL,
    clientID: process.env.AUTH0_CLIENT_ID,
    clientSecret: process.env.AUTH0_CLIENT_SECRET,
    session: {
      cookie: {
        domain: `.${req.headers
          .get('host')
          .split(':')[0]
          .split('.')
          .slice(-2)
          .join('.')}`,
      },
    },
  });
}; will return or etc. The req.headers.get('host') myapp.com apple.myapp.com And at the we want to set up the domain. But without a port, we need to make sure the cookie will be set for . So, basically, we want to be sure we set the cookie at the very top-level domain. session.cookie.domain .myapp.com A small tip: If you want to set HTTP or HTTPS based on development or production, you can pass this to the base. baseURL: `${
      process.env.NODE_ENV === 'development' ? 'http' : 'https'
    }://${req.headers.get('host')}` We need to modify the API route as well to use the custom Sdk. // src/api/auth/[auth0]/route.ts
import type { NextApiRequest, NextApiResponse } from 'next'
import { initializeAuth0 } from '@/lib/auth0';

export const GET = (req: NextApiRequest, res: NextApiResponse) => { 
  const auth0 = initializeAuth0(req); 
  return auth0.handleAuth()(req, res); 
} Now, if you're trying to access your instance, it has to work to log in but will not work to log out. Why, you wonder? So, if you open the dev tools from your browser and go to application -> cookies. You'll see two cookies: with the name appSesion, value, and the and the second with . That's normal for how the project is configured right now. First domain: myapp.com one domain: .myapp.com But if you want to log out, I will do the refresh I was saying at the start of the article and will log you back in. And now comes the fix: The issue is middleware . This middleware is setting the domain cookie, aka . Honestly, I don't know if whoever from Auth0 wrote the docs forgot to add that, or it was just ignorance, or maybe it is writing somewhere that if you use at the root level, it creates a new cookie. I saw a lot of examples using and I don't know if that formula is still creating the cookie, but at the root level, sure it is. Maybe Auth0 guys didn't know about it; who knows, I'm not here to point any fingers at anyone. withMiddlewareAuthRequired myapp.com withMiddlewareAuthRequired withMiddlewareAuthRequired(PageName), Let's get back at the fix. So, you just have to change the name of middleware from to anything else, let's say, and it will work perfectly fine. withMiddlewareAuthRequired middleware, I'm also providing a GitHub repo for the final code to be more concise because here, I mostly explained what was the issues and so on, and we didn't focus too much on the code itself. https://github.com/alexcloudstar/nextjs13-auth0-sub-domains End note: I'm pretty sad that most of the discussions on Auth0 are open; there are a few responses or no responses at all, and then the topic is closed. Or, in some discussions, folks came and said: "Oh yeah, I had the same issue, but I managed to fix it" - Yes, I'm glad you did, but how? Because I need a fix as well at that very moment. Anyway, that's it for today, guys! Many thanks to my colleagues for help, the internet, and you guys for reading. If you have any queries, please let me know at or on my social media. alexcloudstar@gmail.com Until next time! Cheers! 🍻 Also published . here

Setting Up NextJS 13 with Auth0 and Sub-Domains: A Guide to Multi-Tenancy Web Apps

Hey devs, welcome to this tutorial; we will build a real-time Todo App with React, NextJs + Firebase. The full code of this project is available in this repository The explanation of this article is in this video Before we start writing code, I want to tell you that I expect you to have basic knowledge of React.Js and Next.Js If you are not familiar with React and Next, go through these documentations ReactJs Documentation NextJs Documentation Here’s what we are going to build After completing this tutorial, our app will look like this Here’s our tech stack for this project : We will ReactJs for building the UI of this app. ReactJs : NextJs is a react-based framework for building modern web apps. It provides benefits like and many benefits NextJs Server Side Rendering SEO : We will use firebase as a backend of this app. We will store data in **.** It provides many functions for creating real-time apps. (Our todo app will be real-time) Firebase Firestore : ChakraUI is a styling framework. It has styled components ready to be used in-app. It provides responsiveness, dark mode, an eye-appealing color scheme, and so on. ChakraUI Why are we using Firebase in our project? Firebase provides so much functionality that it is hard to ignore. It provides Social Auth with just 4–5 lines of code. We will implement in our Project using firebase Google Auth Some features of Firebase are: Authentication Real-Time Server Low-Security Risk Social Auth Minimal Setup Table of Contents Create Firebase Project Create Methods to Interact with Firestore Create React Components (Add Todo, Auth, TodoList) npm run dev 😁 Let’s begin with creating the next app Type the following command to install the next app npx create-next-app next-firebase-todo Install the required dependencies Chakra UI npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion 2. Firebase npm i firebase Create Firebase Project Go to Firebase Console Click on Create a Project Name your project and tick the box, and Click Continue We don’t need Google Analytics for the Project. So, untoggle that button and click Continue After your project has been created, you will see your project Dashboard As Icon suggests, the first button is for the project, the second for and the third for IOS Android, Web Apps. We are creating a web app, so we are gonna click on that. Name your web app and click Register app Copy this code and click on Continue to Console : Save this code somewhere. We will need it later in our project. Note On the left side, click on Build We will only need two features of firebase from this list. — For adding Google Sign In — For Storing User Todos Authentication FireStore Database Now, let's Enable these two features first. Click on Authentication Click Get Started We are only gonna use Google Authentication, so click on Google Enable Google Authentication, Select Project Support Email, and click Save We have successfully enabled Google Auth in our Firebase Project Now let us enable the Firestore Database. Go to the left Sidebar, Click on Build, and Click Firestore Database Click on Create database Select and click and Click start in test mode Next, Enable Now we have enabled both and the required for our Project Authentication Firestore Database Now let’s start coding Let’s go to and copy-paste the following pages/_app.js import { ChakraProvider } from "@chakra-ui/react";
function MyApp({ Component, pageProps }) {
return (
<ChakraProvider>
<Component {...pageProps} />
</ChakraProvider>
);
}
export default MyApp; We just wrapped inside <Component {…pageProps} /> <ChakraProvider> Chakra UI’s official Documentation suggests this. Now we are going to set up firebase in our web app. Let us create a new folder at the project root named firebase Create a file named inside directory index.js firebase Now paste the code I told you to copy earlier(firebase config) import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
// replace this firebase conFigvariable with your own
const firebaseConfig = {
apiKey: "AIzaSyClH1YdssQHAA0peMtQ_wj2A4Crnc4fEgU",
authDomain: "medium-firebase-next-todo.firebaseapp.com",
projectId: "medium-firebase-next-todo",
storageBucket: "medium-firebase-next-todo.appspot.com",
messagingSenderId: "989711683222",
appId: "1:989711683222:web:bc878dca5a5d251177fcb7",
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
export { auth, db }; What we did here is we just pasted the firebase config. We additionally created two variables and which are the and respectively. auth db firebase auth module firestore module, Let’s add a new dependency to our project, which is react-icons npm install react-icons --save React Icons library lets you add beautiful icons to your project. Now let us create methods to create and interact with todos Methods to Interact with Firestore Create a directory at the root of your project named api and create a file todo.js and copy and paste the following code in todo.js import { db } from "../firebase";
import {
collection,
addDoc,
updateDoc,
doc,
deleteDoc,
} from "firebase/firestore";
const addTodo = async ({ userId, title, description, status }) => {
try {
await addDoc(collection(db, "todo"), {
user: userId,
title: title,
description: description,
status: status,
createdAt: new Date().getTime(),
});
} catch (err) {}
};
const toggleTodoStatus = async ({ docId, status }) => {
try {
const todoRef = doc(db, "todo", docId);
await updateDoc(todoRef, {
status,
});
} catch (err) {
console.log(err);
}
};
const deleteTodo = async (docId) => {
try {
const todoRef = doc(db, "todo", docId);
await deleteDoc(todoRef);
} catch (err) {
console.log(err);
}
};
export { addTodo, toggleTodoStatus, deleteTodo }; Now let’s create an Authentication hook for checking auth status of the user. Create a directory named hooks and create a file in directory useAuth.js hooks and copy and paste the following code in useAuth.js import { useEffect, useState } from "react";
import { auth } from "../firebase";
const useAuth = () => {
const [user, setUser] = useState(null);
const [isLoggedIn, setIsLoggedIn] = useState(false);
useEffect(() => {
auth.onAuthStateChanged((user) => {
setIsLoggedIn(user && user.uid ? true : false);
setUser(user);
});
});
return { user, isLoggedIn };
};
export default useAuth; What we did is created a useAuth hook that returns the current and Boolean. user isLoggedIn Every time the auth status changes, the method inside the is called. onAuthStateChanged This functionality is given by firebase itself Now let’s create UI Create React Components Create directory at the root of your web app components We will create 3 components in our app AddTodo — for adding a new todo Auth — for adding Login/Logout Button TodoList — for viewing all existing todos properly Let’s start with AddTodo. Create inside directory AddTodo.jsx components Copy and paste the following code inside AddTodo.jsx import React from "react";
import {
Box,
Input,
Button,
Textarea,
Stack,
Select,
useToast,
} from "@chakra-ui/react";
import useAuth from "../hooks/useAuth";
import { addTodo } from "../api/todo";
const AddTodo = () => {
const [title, setTitle] = React.useState("");
const [description, setDescription] = React.useState("");
const [status, setStatus] = React.useState("pending");
const [isLoading, setIsLoading] = React.useState(false);
const toast = useToast();
const { isLoggedIn, user } = useAuth();
const handleTodoCreate = async () => {
if (!isLoggedIn) {
toast({
title: "You must be logged in to create a todo",
status: "error",
duration: 9000,
isClosable: true,
});
return;
}
setIsLoading(true);
const todo = {
title,
description,
status,
userId: user.uid,
};
await addTodo(todo);
setIsLoading(false);
setTitle("");
setDescription("");
setStatus("pending");
toast({ title: "Todo created successfully", status: "success" });
};
return (
<Box w="40%" margin={"0 auto"} display="block" mt={5}>
<Stack direction="column">
<Input
placeholder="Title"
value={title}
onChange={(e) => setTitle(e.target.value)}
/>
<Textarea
placeholder="Description"
value={description}
onChange={(e) => setDescription(e.target.value)}
/>
<Select value={status} onChange={(e) => setStatus(e.target.value)}>
<option
value={"pending"}
style={{ color: "yellow", fontWeight: "bold" }}
>
Pending ⌛
</option>
<option
value={"completed"}
style={{ color: "green", fontWeight: "bold" }}
>
Completed ✅
</option>
</Select>
<Button
onClick={() => handleTodoCreate()}
disabled={title.length < 1 || description.length < 1 || isLoading}
variantColor="teal"
variant="solid"
>
Add
</Button>
</Stack>
</Box>
);
};
export default AddTodo; Now create inside directory Auth.jsx component and copy and paste the following code inside it import React from "react";
import { Box, Button, Link, Text, useColorMode } from "@chakra-ui/react";
import { signInWithPopup, GoogleAuthProvider } from "firebase/auth";
import { FaGoogle, FaMoon, FaSun } from "react-icons/fa";
import { auth } from "../firebase";
import useAuth from "../hooks/useAuth";
const Auth = () => {
const { toggleColorMode, colorMode } = useColorMode();
const { isLoggedIn, user } = useAuth();
const handleAuth = async () => {
const provider = new GoogleAuthProvider();
signInWithPopup(auth, provider)
.then((result) => {
// This gives you a Google Access Token. You can use it to access the Google API.
const credential = GoogleAuthProvider.credentialFromResult(result);
const token = credential.accessToken;
// The signed-in user info.
const user = result.user;
// ...
})
.catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.customData.email;
// The AuthCredential type that was used.
const credential = GoogleAuthProvider.credentialFromError(error);
// ...
});
};
return (
<Box position={"fixed"} top="5%" right="5%">
<Button onClick={() => toggleColorMode()}>
{colorMode == "dark" ? <FaSun /> : <FaMoon />}
</Button>{" "}
{isLoggedIn && (
<>
<Text color="green.500">{user.email}</Text>
<Link color="red.500" onClick={() => auth.signOut()}>
Logout
</Link>
</>
)}
{!isLoggedIn && (
<Button leftIcon={<FaGoogle />} onClick={() => handleAuth()}>
Login with Google
</Button>
)}
</Box>
);
};
export default Auth; Now let’s create the component inside directory. TodoList.jsx components And copy and paste the following code inside it import {
Badge,
Box,
Heading,
SimpleGrid,
Text,
useToast,
} from "@chakra-ui/react";
import React, { useEffect } from "react";
import useAuth from "../hooks/useAuth";
import { collection, onSnapshot, query, where } from "firebase/firestore";
import { db } from "../firebase";
import { FaToggleOff, FaToggleOn, FaTrash } from "react-icons/fa";
import { deleteTodo, toggleTodoStatus } from "../api/todo";
const TodoList = () => {
const [todos, setTodos] = React.useState([]);
const {  user } = useAuth();
const toast = useToast();
const refreshData = () => {
if (!user) {
setTodos([]);
return;
}
const q = query(collection(db, "todo"), where("user", "==", user.uid));
onSnapshot(q, (querySnapchot) => {
let ar = [];
querySnapchot.docs.forEach((doc) => {
ar.push({ id: doc.id, ...doc.data() });
});
setTodos(ar);
});
};
useEffect(() => {
refreshData();
}, [user]);
const handleTodoDelete = async (id) => {
if (confirm("Are you sure you wanna delete this todo?")) {
deleteTodo(id);
toast({ title: "Todo deleted successfully", status: "success" });
}
};
const handleToggle = async (id, status) => {
const newStatus = status == "completed" ? "pending" : "completed";
await toggleTodoStatus({ docId: id, status: newStatus });
toast({
title: `Todo marked ${newStatus}`,
status: newStatus == "completed" ? "success" : "warning",
});
};
return (
<Box mt={5}>
<SimpleGrid columns={{ base: 1, md: 3 }} spacing={8}>
{todos &&
todos.map((todo) => (
<Box
p={3}
boxShadow="2xl"
shadow={"dark-lg"}
transition="0.2s"
_hover={{ boxShadow: "sm" }}
>
<Heading as="h3" fontSize={"xl"}>
{todo.title}{" "}
<Badge
color="red.500"
bg="inherit"
transition={"0.2s"}
_hover={{
bg: "inherit",
transform: "scale(1.2)",
}}
float="right"
size="xs"
onClick={() => handleTodoDelete(todo.id)}
>
<FaTrash />
</Badge>
<Badge
color={todo.status == "pending" ? "gray.500" : "green.500"}
bg="inherit"
transition={"0.2s"}
_hover={{
bg: "inherit",
transform: "scale(1.2)",
}}
float="right"
size="xs"
onClick={() => handleToggle(todo.id, todo.status)}
>
{todo.status == "pending" ? <FaToggleOff /> : <FaToggleOn />}
</Badge>
<Badge
float="right"
opacity="0.8"
bg={todo.status == "pending" ? "yellow.500" : "green.500"}
>
{todo.status}
</Badge>
</Heading>
<Text>{todo.description}</Text>
</Box>
))}
</SimpleGrid>
</Box>
);
};
export default TodoList; We have created all the required components, now we are gonna place them in our app. Go to and remove all the contents and paste the following content pages/index.js import { Container } from "@chakra-ui/react";
import AddTodo from "../components/AddTodo";
import Auth from "../components/Auth";
import TodoList from "../components/TodoList";
export default function Home() {
return (
<Container maxW="7xl">
<Auth />
<AddTodo />
<TodoList />
</Container>
);
} And we are done. npm run dev We have completed the coding of the app. Go to your terminal and type npm run dev and goto in your browser localhost:3000 You will see something like this Now you can and start adding Todo’s log in with Google Get the full code here Watch the explanation video here Follow me on Twitter Also Published Here

Creating a Todo App with NextJs & Firebase

Hello everyone, I hope you all are well. In this post, we are going to discuss, how you can set up a user Login authentication using Auth0 in Next.js projects. Here is a little demo of the project, that we are going to build: Demo Video Link So, let's jump right into it. We will be doing this in 5 easy steps: Note: I have used Tailwind CSS for CSS and created a cutom Navbar for this project , If you wish to get the code for the same , you can visit my and copy from there. Github project link STEP-1 Create your Auth0 Account Create an Auth0 Account. The visit your dashboard and under Applications click on Application, then click on Create Application and provide a name to the application and choose the " " category. Regular web Application Now you will see 5 tabs, one of them is Settings, click on setting and then scroll down a little bit and you will find "Application URIs". Inside that, you have to fill the ALLOWED_CALLBACK_URL and the ALLOWED_LOGOUT_URL like this. After this scroll down to the end and then click on save changes. STEP-2  Setup Next.js App and download the Auth0 package Create a Nextjs App using the create-next-app app-name. For this tutorial I have created the Next.js app with TailwindCSS, just to style the application a little bit, you don't need to do that. In case you want to set up nextjs-app with tailwindCSS, just use this one command it will do the rest. npx create-next-app -e with-tailwindcss my-project
cd my-project And now cd into your folder and install the package. @auth0/nextjs-auth0 npm install @auth0/nextjs/auth0 Step-3 Create .env.local file to store the credentials. Create a file in the root directory of your project and paste this in your file and change the values with your Client_ID, Client_Secret, and ISSUER_BASE_URL, which you can find in your Auth0 dashboard. .env.local .env.local AUTH0_SECRET='LONG_RANDOM_VALUE_32_CHARACTERS_LONG'
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL='https://YOUR_AUTH0_DOMAIN.auth.com'
AUTH0_CLIENT_ID='YOUR_AUTH0_CLIENT_ID'
AUTH0_CLIENT_SECRET='YOUR_AUTH0_CLIENT_SECRET' The base URL will remain the same and the rest three you can find in your Auth0 dashboard. One more thing in the ISSUER_BASE_URL make sure that is present in the URL do not remove it. https:// And to generate the 32 characters string you can paste this code in your terminal and it will generate a 32 characters long random string. node -e "console.log(crypto.randomBytes(32).toString('hex'))"_ Step-4 Create API routes Now we have to create an API route for the login, logout, callback. In Next.js it is very simple to do. Just navigate to the /pages/api folder and inside that create a folder name auth and inside that create a file name [...auth0].js  inside a square bracket like this: So we can create any route like this , , like this. api/auth/login api/auth/logout api/auth/callback The file name in the square bracket will accept any route, it is called catch-all routes. Then navigate inside the [...auth0].js and paste these two line of code and save it. import {handleAuth} from "@auth0/nextjs-auth0";

export default handleAuth(); Make sure you have installed the package "@auth0/nextjs-auth0" . Step-5 So the last step is here. Navigate to /pages/_app.js and inside that wrap the  inside a  Component like this and make sure to import it also. So these were the 5 steps to make authentication work in a Next.js Application. If you open your terminal and cd to your project and type "npm run dev", you will see the application is running on port 3000. Now change the URL and visit . http://localhost:3000/api/auth/login You will see the Auth0 Login page and you will be able to use it and sign in to it. But, the important question arises, how to use it, and how do we know we are authenticated or not? How to use We can use it for the following things: To show some pages in our website which can only be seen if the user is authenticated. If a user is not logged In, we can show a Sign In button, and if the user is Signed In we can show him a Logout button. So to use this we need to use a Custom Hook provided by the auth0 package, which is hook. useUser Navigate to and  write the following code: pages/index.js import {useUser} from "@auth0/nextjs-auth0";

  // you can use the error and loading state to show an error message or a loading spinner while loading.

Inside the Home function just above return, statement write this 

const {user ,error , isLoading} = useUser();

if (isLoading) {
    return (
      <div className="text-5xl font-semibold text-center text-indigo-600">
        ...loading{" "}
      </div>
    );
  }

  if(error){
    return (
      <div className="text-5xl font-semibold text-center text-indigo-600">
        {error.message}
      </div>
    )
  } and then below the tag paste this code: H1 <div className="max-w-[500px] border-4 border-indigo-400 rounded-lg p-6 mx-auto text-3xl mt-16 font-bold text-indigo-700 text-center">
       {user && (
         <p className="mb-6">Welcome 
         <span className="text-amber-600">{user.name}</span></p>
         )}
        {!user && (
          <p>You are Not signed In, Please Sign In to view the Secret Pages.</p>
          )}
  </div> You can do the same thing as above to show the S button only if the user is not logged In and the button only if the user is already logged In. ign In Logout Now suppose you have a members-only page in your application and you want only authenticated users can visit that page. This can be easily done using the Hook provided with nextjs-auth0 SDK. withPageAuthRequired Create a members-only.js file inside the directory and paste this code inside the file givenn below. pages import {withPageAuthRequired } from "@auth0/nextjs-auth0";

const membersOnly = () => {
    return (
        <div>
        <h1 className="text-5xl font-semibold mt-10 text-center text-indigo-600">This page is for Members Only.</h1>   
        </div>
    )
}

export default membersOnly;

export const getServerSideProps = withPageAuthRequired(); So by doing this only authenticated users can visit the page and those who are not authenticated and try to visit the page will be shown a or may be redirected to the login page automatically. 404 page Conclusion So that was all about Nextjs Authentication using Auth0. I hope you like this and enjoyed building this project. If you were stuck somewhere and not able to find the solution you can check out my completed repository here. Thanks for your time to read this project, if you like this please share it on Twitter and Facebook or any other social media and tag me there. Some Useful Link: Next.js and Tailwind Installation Docs Auth0 Github link for project Connect with me: Twitter Link LinkedIn link Facebook Link Github Link Also Published Here

Nextjs User Login Authentication in 5 Simple Steps Using Auth0

Broken authentication is the . This usually means that session management and authentication aren't handled correctly. This gives attackers several avenues to get access to data they can use maliciously. second highest security risk for web applications That's why it is important to make sure you get the best practices in place as early in the development process as possible. You can do a few things to make your authentication process more secure and protect your users. We'll go over a few of those things with a quick Node.js app. First, let's go over some of the different ways you can handle authentication. Authentication methods There are a few different types of authentication methods you can choose from: session-based, token-based, and passwordless. Each of these authentication methods has its pros and cons and we'll go over a few of them. Session-based authentication This is the most common form of authentication. It only requires a username and password that match what's in a database. If a user enters the correct set of login credentials, they will have a session initialized for them with a specific ID. A session is typically ended when a user logs out of the app. When sessions are implemented correctly, they will automatically expire after a set amount of time. You'll see this a lot in finance apps, like banking and trading. This gives users an added layer of security in case they've logged into their bank account on a public computer and forgot about that tab. Token-based authentication Instead of using actual credentials to authenticate requests, token-based authentication gives users a temporary token that's stored in the browser. This token is typically a that contains all of the information an endpoint will need to validate a user. JWT (JSON Web Token) Every request that a user makes will include that token. One of the benefits to using a token is that they can have embedded information about what roles and permissions a user might have without fetching that data from a database. This gives attackers less access to critical information, even if they are able to steal a user's token. Passwordless authentication This form of authentication is completely different from the others. There is no need for credentials to log in. All you need is an email address or phone number associated with an account and you will get a magic link or one-time password each time you want to log in. As soon as you click the link, you'll get redirected to the app and you'll already be logged in. After that, the magic link isn't valid so no one else can use it. When the magic link is generated, a JWT is also generated with it. This is how the authentication happens. With this login method, it's a lot harder for attackers to hack their way into your system. There are fewer inputs for them to take advantage of and sending the JWT through the magic link makes them harder to intercept than sending them through a response. Now that you know about these different authentication methods, let's implement a passwordless authentication model. Implementing authentication in Node Passwordless authentication flow We'll start by going through the process flow of passwordless authentication. A user submits their email address or phone number in the web app. They are sent a magic link to log in with. The user clicks the magic link and they are redirected to the app, already logged in. Now that we have the flow we need to implement, let's start by making a super basic front-end. Front-end setup We don't even need to use a JavaScript framework since the focus is mostly on the back-end. So we'll use some basic HTML and JavaScript to make the front-end. Here's what the user interface code will be. Just a small HTML file that uses a frontend.js file. Passwordless Authentication This is where you'll put your email to get a magic link. Enter your email address Get magic link <!DOCTYPE html> < > html < > head < > title </ > title < = > script src "./frontend.js" </ > script </ > head < > body < > h1 </ > h1 < > form < > div < = > label for "email_address" </ > label < = = /> input type "email" id "email_address" </ > div < = = > button type "submit" id "submit_email" </ > button </ > form </ > body </ > html This is what the frontend.js file will look like. .onload = { submitButton = .getElementById( ); emailInput = .getElementById( )
  submitButton.addEventListener( , handleAuth); { message = axios.post( , { : emailInput.value
    }); message;
  }
}; window => () const document "submit_email" const document "email_address" "click" /** This function submits the request to the server for sending the user a magic link.
   * Params: email address
   * Returns: message
   */ async ( ) function handleAuth const await "http://localhost:4300/login" email return The JavaScript file gets the submit button we made in the HTML file and adds a click event listener to it. So when the button is clicked, we'll make a POST request to the server we have running on at the endpoint with the email address entered. Then, if the POST request is successful, we will get a message back we can show to the user. http://localhost:4300 login Back-end setup Now we're going to start making our Node app. We'll start by making an express app and installing a few packages. cors ; express ; PORT = process.env.PORT || ; app = express(); app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ : })); app.post( , (req, res) => { email = req.body.email; (!email) {
    res.statusCode( );
    res.send({ : ,
    });
  } (email) {
    res.statusCode( );
    res.send(email);
  }
}); server = app.listen(PORT, () => { .info( + PORT)
}) server import from "cors" import from "express" const 4000 const // Set up middleware extended false // Login endpoint "/login" const if 403 message "There is no email address that matches this." if 200 // Start up the server on the port defined in the environment const console "Server running on port " export default With this basic server in place, we can start adding more functionality. Let's go ahead and add the email service we're going to use. First, add to your package.json and then import it. nodemailer import nodeMailer from "nodemailer"; Then below the middleware, we'll make a transporter to send emails. This code configures and makes the email template with some simple HTML. nodemailer transport = nodeMailer.createTransport({ : process.env.EMAIL_HOST, : , : { : process.env.EMAIL_USER, : process.env.EMAIL_PASSWORD
  }
}); emailTemplate = // Set up email const host port 587 auth user pass // Make email template for magic link const ( ) => { username, link } `
  <h2>Hey </h2>
  <p>Here's the login link you just requested:</p>
  <p> </p>
` ${username} ${link} Next, we need to make our token that holds the user's info. This is just an example of some of the basic things you might include in a token. You could also include things like, user permissions, special access keys, and other information that might be used in your app. makeToken = { expirationDate = ();
  expirationDate.setHours( ().getHours() + ); jwt.sign({ email, expirationDate }, process.env.JWT_SECRET_KEY);
}; // Generate token const ( ) => email const new Date new Date 1 return Now we can update the endpoint to send a magic link to registered users and they'll be logged in to the app as soon as they click it. login app.post( , (req, res) => { { email } = req.body; (!email) {
    res.status( );
    res.send({ : ,
    });
  } token = makeToken(email); mailOptions = { : , : emailTemplate({
      email, : ,
    }), : , : email,
  }; transport.sendMail(mailOptions, (error) => { (error) {
      res.status( );
      res.send( );
    } {
      res.status( );
      res.send( );
    }
  });
}); // Login endpoint "/login" const if 404 message "You didn't enter a valid email address." const const from "You Know" html link `http://localhost:8080/account?token= ` ${token} subject "Your Magic Link" to return if 404 "Can't send email." else 200 `Magic link sent. : http://localhost:8080/account?token= ` ${token} There are only two more things we need to add to the code to get the server finished. Let's add an endpoint. Then we'll add a simple authentication method. account app.get( , (req, res) => {
  isAuthenticated(req, res)
}); // Get account information "/account" This gets the user's token from the front-end and calls the authentication function. isAuthenticated = { { token } = req.query (!token) {
    res.status( )
    res.send( ) } decoded {
    decoded = jwt.verify(token, process.env.JWT_SECRET_KEY)
  } {
    res.status( )
    res.send( ) } (!decoded.hasOwnProperty( ) || !decoded.hasOwnProperty( )) {
    res.status( )
    res.send( ) } { expirationDate } = decoded (expirationDate < ()) {
    res.status( )
    res.send( ) }
  res.status( )
  res.send( )
} const ( ) => req, res const if 403 "Can't verify user." return let try catch 403 "Invalid auth credentials." return if "email" "expirationDate" 403 "Invalid auth credentials." return const if new Date 403 "Token has expired." return 200 "User has been validated." This authentication check gets the user's token from the URL query and tries to decode it with the secret that was used to create it. If that fails, it returns an error message to the front-end. If the token is successfully decoded, a few more checks occur and then the user is authenticated and has access to the app! Best practices for existing authentication systems Passwordless authentication might not be possible for existing systems, but there are things you can do to make your apps more secure. Increase the complexity requirements of passwords. Use two-factor authentication. Require passwords to be changed after a certain amount of time. Conclusion There are a lot of different ways you can implement an authentication system for your app and passwordless is just one of those. Token-based is another commonly used type of authentication and there are plenty of ways to handle this. Making your own authentication system might take more work than you have time for. There are a lot of existing libraries and services that you can use to integrate authentication in your app. Some of the most commonly used ones are Passport.js and Auth0. Previously published at https://dev.to/flippedcoding/implementing-passwordless-authentication-in-node-js-43m0

How to Build A Passwordless Authentication with Email and JWT

As a developer, setting up everything on InstagramAPI takes more time than Facebook GraphAPI(I love Facebook), as the reason: public content is required access_token public content is required a verified account (not sandbox) a whitelisted is required, to verify account and get access_token (Facebook requires only and but not a server, to get by HTTP GET) Oauth server APP_ID APP_SECRET ACCESS_TOKEN The is a template also a tutorial to setting up a , for Intagram-API OAuth purpose. Git Node.js server Everything we do is simple, wire up the config between Instagram and Node.js server, with the right setting, getting access_token is easy, which is used in every Intagram-API request as a compulsory parameter. 1. Create an Instagram Application Create IG Application in the , fill every we need to, and done. portal 2. Wiring IG APP and Node.js Server ( ) Node.js tempalte on Git After IG application is created, configuring , and are the next, because IG-API does require added access_token for any API request. ClientID ClientSecret redirectURL remark: Below are the two URLs needed to add on **_Valid redirect URIs_** http://youhost/authorize_user and http://youhost/handleauth 3. GET access_token https://www.instagram.com/oauth/authorize?client_id={ }&redirect_uri={ }&response_type=code CLIENT_ID http://youhost/authorize_user Press Authorize Like this story? It is helpful to others? It helps me know if you’d like to see write more about his topic and helps people see the story, . when tap the heart below Reference: https://www.instagram.com/developer/authentication/ https://www.npmjs.com/package/instagram-node https://github.com/wahengchang/instagram-oauth-nodejs-server

Stories, News & Mentions about HANDLHEALTH

Handlhealth’s Stories on HackerNoon