DEV Community

Cover image for How to add Authentication with HANKO in your project? ✨✨✨
Ankur Singh
Ankur Singh

Posted on • Updated on

How to add Authentication with HANKO in your project? ✨✨✨

Welcome 👋 to this blog. In this blog we will learn how to integrate Hanko Authentication within your application. In this blog, I am using the Image project whose code can be found here.

File Structure of the repository 🤩

This is the ReactJS project created with 

project-directory/
│
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   ├── robots.txt
│
├── src/
│   │
│   ├── components/
│   │   ├── HankoAuth.jsx
│   │   ├── Header.jsx
│   │   ├── Hero.jsx
│   │   ├── HighlightTextHero.jsx
│   │   ├── List.jsx
│   │   ├── MainDrawer.jsx
│   │
│   ├── config/
│   │   ├── config.js
│   │
│   ├── pages/
│   │   ├── AboutUsPage.jsx
│   │   ├── AuthPage.jsx
│   │   ├── ContactUsPage.jsx
│   │   ├── HelpAndSupport.jsx
│   │   ├── IndexPage.jsx
│   │
│   ...
...
Enter fullscreen mode Exit fullscreen mode

App.jsx 😄

This is the App.jsx code.

import './App.css';
import { ChakraProvider } from '@chakra-ui/react'
import IndexPage from './pages/IndexPage';
import AboutUsPage from './pages/AboutUsPage';
import HelpAndSupport from './pages/HelpAndSupport';
import { BrowserRouter, Routes, Route } from "react-router-dom";
import ContactUsPage from './pages/ContactUsPage';
import List from './components/List';

function App() {
  return (
    <ChakraProvider>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<IndexPage />} />
          <Route path="/help&support" element={<HelpAndSupport />} />
          <Route path="/aboutus" element={<AboutUsPage />} />
          <Route path="/contactus" element={<ContactUsPage />} />
          <Route path="/list" element={<List />} />
        </Routes>
      </BrowserRouter>
    </ChakraProvider>
  )
}

export default App;
Enter fullscreen mode Exit fullscreen mode

To create an Authentication component we have HankoAuth.jsx

The code is as follows 🤩

import { useEffect } from "react";
import { register } from "@teamhanko/hanko-elements";
import { useNavigate } from "react-router-dom";
const hankoApi = process.env.REACT_APP_KEY;


export default function HankoAuth() {
  const navigate = useNavigate();
  useEffect(() => {
    register(hankoApi)
    .catch((error) => {
      // handle error
    })
    .then((registration) => {
      // handle registration
      navigate("/");
    });
  }, []);

  return (
    <div className="flex min-h-screen justify-center items-center">
      <hanko-auth/>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

You can get your hankoApi by login to the cloud console of Hanko.

Time to integrate within your app 😄

Here is the code of the IndexPage or MainPage.

import React, { useState, useEffect } from "react";
import MainDrawer from "../components/MainDrawer";
import Hero from "../components/Hero";
import Header from "../components/Header";
import HankoAuth from "../components/HankoAuth";
import userId from "../config/config.js"

function IndexPage() {
    const [user, setUser] = useState(null);
    useEffect(() => {
        if (userId !== null) {
            setUser(userId);
        }
    }, [userId]);
    return (
        <>
            <Header setUser={setUser} />
            {!user && <HankoAuth />}
            {user && <>
                <MainDrawer />
                <Hero />
            </>}

        </>
    )
}

export default IndexPage;
Enter fullscreen mode Exit fullscreen mode

These code blocks are mainly responsible for the conditional rendering of the auth components.

        {!user && <HankoAuth />}
            {user && <>
                <MainDrawer />
                <Hero />
         </>}
Enter fullscreen mode Exit fullscreen mode

How to get the data of logged-in user 🤗

This logic is implemented in config.js. We can fetch the data of the user using the SDK.
Read More

import { Hanko } from "@teamhanko/hanko-elements";

let userId = null;
const hankoApi = process.env.REACT_APP_KEY;
const hanko = new Hanko(hankoApi);

try {
    const { id } = await hanko.user.getCurrent();
    if (id) {
        userId = id;
    }
} catch (error) {
    console.error('Error occurred while fetching user data:', error);
}

export default userId;
Enter fullscreen mode Exit fullscreen mode

This is how we can intergrate the Hanko Auth within our web application. 🤗🤗🤗

You got it 🤩

You have learned how to integrate Hanko Auth into your web application. Thanks for reading till the end. If you have any feedback, the comment section is yours. If you find this blog useful you can start this repository and connect with me.

Hire me: ankursingh91002@gmail.com
LinkedIn
Twitter

Top comments (0)

Read next

juarezasjunior profile image

C# Tip: Use readonly for Immutable Constants

Juarez Júnior -

abdur_rakibrony_349a3f89 profile image

Building a Full-Stack CRUD App with Next.js 14, Prisma, and PostgreSQL

Abdur Rakib Rony -

juarezasjunior profile image

Dica C#: Utilize readonly para Constantes Imutáveis

Juarez Júnior -

lithephp profile image

Como o Lithe Facilita o Desenvolvimento de Aplicações Web em PHP com Menos Código

Lithe -