DEV Community

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

Posted on • Edited 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

engels_garcia_d67e58ea9d1 profile image

Moving into the niche! From JavaScript to GDScript

Engels Garcia -

dev_d_akash profile image

Typing User Indicator (Bug Fixes and Optimization)

Akash Singh -

richardrost profile image

Import Specific Sheet in Microsoft Access

Richard Rost -

adamchain profile image

Practice javascript via first principle thinking, not syntax memorization

Adam Chain -