---

Are you tired of juggling multiple passwords for different accounts? Do you want a secure and convenient way of managing your passwords? Look no further than my latest project - a password manager built with Vite and React! In this article, I'll show you how to use Passage by 1Password for user authentication. With the help of Vite, React, and Passage, I created a powerful and user-friendly tool to keep your passwords safe. Follow along and learn how I integrated Passage into my Web-App! #1Password #BuildWith1Password

I want to thank 1Password and Hashnode for hosting this amazing hackathon which allowed me to build an app with seamless authentication of passage by 1Password.

Introduction:

What is Passage?

Passage by 1Password is a secure and easy-to-use solution for developer authentication. It's a tool that helps developers integrate secure login and authentication into their applications. With Passage, developers can easily and quickly authenticate users without the need for complicated setup processes or additional infrastructure.

Users simply enter their email addresses to receive a secure single-use link that allows them to log in quickly and securely without needing a password. This technology helps provide a more streamlined and secure authentication experience, ultimately leading to higher user trust and satisfaction.

How did I use it in my Web-App?

I used Passage to implement user Authentication (Log in/Signup) by following their documentation and writing just a few lines of code and installing packages by Passage. This saves a lot of time in development and also saved me from writing authentication from scratch which would have taken a lot of time.

---

Set up your Vite+React Project:

Run the below command to create a new React App using Vite. I am using Vite just because it is faster.

npm create vite@latest

Then go to the project directory and run the below commands:

cd my-project
npm install
npm run dev

VOILA!! your react app is ready.

Now its time to install the necessary package for Passage:

npm i --save @passageidentity/passage-elements

Now you are ready for creating your app.

---

Passage Console

To use Passage you have to first signup up here, go to My Apps, then Create a new app and you will have a list of options as below

Give the name of your choice but in the domain give the localhost with the port number, in Vite it is localhost:5173 and give the redirect URL the name of the URL you want your user to land after Login, like /home or /dashboard. After successfully creating your app, you will get an App_id, copy it as it will be needed in our react app. My app is react-passage.

---

How to implement Passage?

Now that you have signup in the Passage console and created an app and have your app_id. Let's see how to create a Login page and Home page and implement Passage. Create two folder components and hooks inside the src directory as shown Below:

Now Create an .env file in root directory where you will paste the app_id you copied from Passage console. Save the app id as below in .env file

Next step is to make a useCurrentUser.js inside the hooks folder we created, put the below code in that file:

import { PassageUser } from '@passageidentity/passage-elements/passage-user';
import { useState,useEffect } from 'react';
import React from 'react'

export function useCurrentUser() {
    const [result, setResult] = useState({
        isLoading: true,
        isAuthorized: false,
        username: '',
    });

    useEffect(() => {
        let cancelRequest = false;
        new PassageUser().userInfo().then(userInfo=> {
            if( cancelRequest ) {
                return;
            }
            if(userInfo === undefined){
                setResult({
                    isLoading: false,
                    isAuthorized: false,
                    username: "",
                });
                return;
            }
            setResult({
                isLoading: false,
                isAuthorized: true,
                username: userInfo.email ? userInfo.email : userInfo.phone
                ,
            });
        });
        return () => {
            cancelRequest = true;
        };
    }, []);
    return result;
}

this performs the authorization of user whenever he logins to your app.

Now in your Login page, first define a variable with your app_id from the .env file and put the code below for the passage element to appear on your page:

import React from 'react'
import '@passageidentity/passage-elements/passage-auth'
import '../styles/login.css'

function Login() {

    const apiKey = import.meta.env.VITE_REACT_APP_PASSAGE_APP_ID;

  return (
    <div className='container'>
      <passage-auth app-id={apiKey} ></passage-auth>
    </div>
  )
}

export default Login

You can design your home/dashboard page as your liking, as i have made a password manager, my user lands to that in the home page.

After you have created your home/dashboard page successfully, let's do the routing in our react app.

In App.jsx, define the routes as below:

import { useState } from 'react'
import { Routes, Route } from 'react-router-dom'
import './App.css'
import Login from './components/Login'
import Home from './components/Home'

function App() {

  return (

      <div>
        <div className="header">
          <h3>KeyVault :</h3>
          <h4>&nbsp;Secure your passwords</h4>
        </div>
        <Routes>
          <Route path="/" element={<Login/>}></Route>
          <Route path="/home" element={<Home/>}></Route>
        </Routes>
      </div>

  )
}

export default App

and in main.jsx do the following:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { BrowserRouter as Router } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
)

If you have done all the above steps, you will see the passage login element on your Login page below:

That is it, with just lines of code and a single package you can implement a seamless and secured user authentication system by Passage in any app or website.

---

How Passage helped me?

I created a password manager in React and for such a web-app user authentication is a key part as the sensitive info stored by users should only be accessible to verified individuals. Here came Passage to my rescue, with just a few steps as mentioned above I was able to integrate the seamless authentication of Passage in my project.

Login Page:

Home Page:

This way my web app is a fully secured password manager which anyone can use, and only verified individuals can access it and that too without the need to remember any password, just enter your mail and get the one-time code.

Check out the Web-App:

https://password-manager-with-passage.vercel.app/

Check the code on Github:

https://github.com/Faizan711/password-manager-with-passage

Once again I would express my gratitude to 1Password and Hashnode for organizing such an event which led to learning a new game-changing way to user authentication to use in any app or website.

#1Password #BuildWith1Password #KeyVault #Passage

---

I have made this article from my own experience and by learning from many documents and articles, if there is any mistake comment below and if you have ideas to improve this article, reach out to me. If you found my blog interesting and want to hire me, email me at fa1319673@gmail.com