TechBoostHub: Unleashing Tech Brilliance with Hanko Authentication
Published: 2023-10-31 10:05:37

**Introduction**
TechBoostHub, your gateway to tech knowledge, presents an array of engaging quizzes and challenges. We've seamlessly integrated interactive quizzes with cutting-edge authentication from Hanko, ensuring a secure learning environment. Users explore tech topics, compete on leaderboards, and experience the benefits of Hanko's authentication.

**Tools Used:**
React Native: Mobile app development
Supabase: Database
Hanko: Authentication
Next.js: Integration with Hanko Authenticator
Stepzen: Connecting TechBoostHub project to supabase posgreQL

**How to get started**
**First: Clone Hanko Authentication using Nextjs**
Visit the GitHub repository, [](https://github.com/teamhanko/hanko-nextjs-starter). create a repository using the template and clone it. using the following command

`git clone https://github.com/Emmanueluzoezie/<the name you give to the repository>.git`

`cd <the name you give to the repository>`
open the project in your code editor, use the following command in your terminal 
`pnpm install`

create the following folder Dashboard, native and profile, each folder should have a page in it for routing. to learn more about routing [](https://nextjs.org/docs/app/building-your-application/routing). these folders are where we will be able to use Hanko authenticator in our mobile app using React native

Here is how the folder will 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3tpl9x168bhozqrsdzg.png)

Next, in your project, inside your components folder, you will see a folder call hanko-components that has three tsx file inside.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zn5nehjrojf7n7y5pbud.png)

then do the following
the home route will have the LoginComponent inside
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kru4s80i19vcuhqqvk9j.png)



make sure you include dashboard, native and profile route in your middleware.ts file

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjtagpmfqy1y7nqvbnjs.png)

your dashboard route
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ln4hjshxzjt3do73zowd.png)

Now add the .env file, and add it in your .gitigone file so it won't be exposed to your GitHub repo. now go to [](https://cloud.hanko.io/) sign in using your email, go to the dashboard, and get your API URL. This is how it will look

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjkfcjnjewmoftujrhv3.png) 

Now go to Vercel and deploy your application, copy the URL and remove the previous URL you put while creating your project, and put the URL you get from Vercel. make sure you put your env variable to vercel

Now let's initialize our mobile application with React Native with the following command

Using Yarn
`yarn create expo-app TechBoostHub`
Using Npm
`npx create-expo-app TechBoostHub`

`cd TechBoostHub` and open the project in your code editor
create a portal folder with three file

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcc4717ss7ivvb68tb4e.png)

isUserAvailable file is the one that controls when user is login and not login.

Now in the unauthenticatedUser file call the URL you deploy in Vercel using react native webview library and create a function to know when the user is login, if the user is login, it will navigate to dashboard and get the user email and navigate to the native route that includes the user email in the route parameter, remember how will get the user email and id from Hanko package, in our Nextjs project earlier. now in the function, we can get the user's email into our mobile app. This means the user is authenticated. we can authenticate the user to our app.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wg1j2xxde3zh82tvrl4p.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3le5472ofekau6qq60ln.png)

In getting the profile all you need to do is to go to the profile screen and call the URL/profile in your webview. that's all for this article hope you learned something new. will be creating a YouTube video soon to explain and show you how to build the complete project in my youtube channel @ (https://www.youtube.com/channel/UCvDyqLjySwKuTXWLp9X7EYA) You can as well get in touch with me using my link tree (https://emmanueluzoezie.bio.link/)