# 1Password x Hashnode Hackathon

### Introduction

Thank you [1Password](https://hshno.de/2vBgtSn) and [Hashnode](https://hashnode.com/) for conducting this hackathon. I got to learn about passwordless authentication for web applications and also implement a small part of it. Having gotten exposure to the available tools and CLI, I have a lot of learnings to take and look forward to implementing those in my future projects as well.

### Details

I chose to use an existing project I previously built for [AppWrite Hackathon](https://anushasridharan.in/appwrite-x-hashnode-hackathon) and added Passage's passwordless auth on the landing page.  
The [examples by framework](https://docs.passage.id/frontend/examples-by-framework) templates provided by [Passage](https://docs.passage.id/) by 1Password were very useful to get started.

**Project Name:** WasteAware  
**Team:** @[Anusha](@anusha-s)

### **Stack**

Front-end: Next.js / Tailwind  
Hosting: Netlify, [**wasteaware.netlify.app**](http://wasteaware.netlify.app)  
Backend: AppWrite (to list food wastage test data)  
Authentication: Passage by 1Password  
**Github**: [**anushas-dev/waste-aware**](https://github.com/anushas-dev/waste-aware)

### **Motivation**

I always wanted to consciously track food wastage and check where I could help from my side to reduce it. Be it extra meals, spoilt food, or just the food on my plate that I couldn't finish, I would try my best to avoid any wastage or at least keep it to the minimum.

### **Description**

[**WasteAware**](https://wasteaware.netlify.app/) is a simple site that I plan to build on further but at this point, it is only listing test data on the wastage reported on a few food items. The next plan is to make it user-specific and allow them to use it for food waste tracking on a daily/weekly basis and understand how they can do their bit to reduce the wastage.

### Implementation Steps

* Create an account on [Passage by 1Password](https://passage.1password.com/)
    
* After successful account creation, you should be able to see a sample app available for a live preview
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688100605902/122e399e-704a-4869-aa32-b0ea4c584014.png align="center")
    
* You can onboard your application by clicking on 'Create New App', you'll be given the option to either go fully passwordless or add passkeys to the existing authentication system.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688100840420/57e56fbe-2b13-462d-87c6-950718b764f1.png align="center")
    
* Fill in the details as required for your application - Name, domain, direct URL, tech stack etc.
    
    ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1688100943741/ed928ab1-b19b-4bac-afd7-9fc109d5cde0.png align="center")
    
* Follow the steps as listed in [Next.js - Passage Docs](https://docs.passage.id/frontend/examples-by-framework/next.js) and refer to the template for your corresponding stack, as my project was based on Next.js, I referred - [02-Login-With-Profile · GitHub](https://github.com/passageidentity/example-nextjs/blob/main/02-Login-With-Profile/pages/dashboard.js).
    
* Before committing my changes, I updated the ENV variables on my Netlify project required for PASSAGE integration (PASSAGE\_APP\_ID and PASSAGE\_API\_KEY)
    
* As Netlify picks up Github changes on the new commit, it deployed the changes made for the Passage Auth element on my Index and redirect pages.
    

### Challenges

* I struggled initially to hide page props and show only when 'isAuthorized' is true. It ended up hiding the passage auth element on the landing page too.
    

I eagerly look forward to future events and collaborations that continue to push the boundaries of what is possible in the realm of password management and digital security.