Revolutionise Authentication using Hanko
Tags: nextjs, hanko, openai, memes
Published: 2023-10-25 20:22:31

## Hanko Memes

- It is an AI-based fun project which lets anyone create memes.
- This project is part of a hackathon to create any functioning app that can be hosted online with Hanko auth integrated.
- In this project OpenAI chat completion model generates a caption given a topic and audience.
- Once the caption is generated user can use a meme template to add the generated caption thus producing a sharable meme.
- Technologies: NextJs, Hanko Authentication, Supabase, ui.shadcn , Deployed on Netlify and Vercel

Working Application : https://hanko-memes.vercel.app

## Run the project


### Just clone [hanko-memes](https://github.com/sonu0702/ repo


### Install all packages

```bash
   yarn install
```

### .env file , generate your [hanko api url](https://docs.hanko.io/setup-hanko-cloud) 

```bash
   copy content of .env.example into .env
```

### Run the server

```bash
   npm run dev
```

The application connects with the backend server deployed on Netlify.
You can find the code in [hanko-memes-be] (https://github.com/sonu0702/hanko-memes-be)
If you want to check out just the frontend integration of 
Hanko Authentication just check my frontend repo [hanko-memes](https://github.com/sonu0702/hanko-memes)

For the frontend integration of the Hanko Authentication, I used [hanko-nextjs-starter](https://github.com/teamhanko/hanko-nextjs-starter). It is very helpful and I would recommend this since it will give a clear picture of the authentication flow. The other which developers have is [Hanko documentation](https://docs.hanko.io/quickstarts/frontend/react).

So Hanko is a hands-down winner in enhancing experience user authentication and security.
This is my first time using a biometric authentication integration into a web application and Hanko made it very simple.

## Application using Hanko

### Login

This is the interface of login for users, they can login in using email or passkey, which will open an interface to use the finger biometric of your device,
in my case laptop.

Meme template, MyMemes and Generate meme are other features which I have added.

<img width="1509" alt="Hanko login Interface" src="https://github.com/sonu0702/hanko-memes/assets/61102795/ac5df68e-c2b3-41c2-bd06-add839ebd00f">

### Meme Templates

`Meme Template` page lists all the meme templates which a user can use to write captions and personalise the meme.

Once you click on any of the Memes you will be redirected to the `Meme Generator` page.

<img width="1509" alt="Meme Templates" src="https://github.com/sonu0702/hanko-memes/assets/61102795/494cf191-e483-4c87-a092-a73a2b2499bb">

### Meme Generator

This is the most interesting feature actually. You just have to fill in Topic and Audience as shown in the screenshot and click on `AI Captions`, AI will generate captions for you.
or you can just type in top and bottom captions and then click on Generate Meme to create a shareable meme.

<img width="1509" alt="image" src="https://github.com/sonu0702/hanko-memes/assets/61102795/6dfb34c2-fef6-41ea-bf4d-90718c430177">

### My Memes

Since you are logged into the application, the application stores the memes generated by you to be visible only to you.

<img width="1509" alt="image" src="https://github.com/sonu0702/hanko-memes/assets/61102795/a11b7f24-85e1-45a2-bd3f-9624a3503f0e">

## Backend Integration of Hanko Auth

I have my backend code in [hanko-memes-be](https://github.com/sonu0702/hanko-memes-be). The most significant peace of code which I want to briefly touch upon is how to handle / very Hanko Auth Token.

Let me paste the code here 

```js
const jwt = require('jsonwebtoken');
const jwksClient = require('jwks-rsa');

authenticatedUserId: async (event) => {
    if (
      event.headers.authorization &&
      event.headers.authorization.split(" ")[0] === "Bearer"
    ) {
      let token = event.headers.authorization.split(" ")[1];
      let client = jwksClient({ jwksUri: `${process.env.HANKO_API_URL}/.well-known/jwks.json` })
      let signkey = await client.getSigningKey()
      let publicKey = signkey.getPublicKey();
      let verified = jwt.verify(token, publicKey, {})
      return verified.sub;
    } else {
      throw new Error(`Invalid user`)
    }
  }
```

It is as simple as it looks. Hanko has followed JWT token standards for user authentication.

I have used standard `jsonwebtoken` and `jwks-rsa` libraries. These libraries helped me get the public key using that I have verifed the JWT token to extract userId.

By participating in [hanko hackathon](https://www.hanko.io/hackathon#Apply) hackathon I got to explore Hanko Authentication an awesome authentication library, OpenAI to generate meme captions and Next.Js 13.