Login with QR Code

The login for QR authorization seem very abstract, but it is this simple. The project shall be the basic blueprint for QR authorization implementation.

How it works

Setup

Run the websocket server

cd server && npm i && npm run dev

Now your server is running at http://0.0.0.0:4000. We need to used host "0.0.0.0" to expose the port publicly in the local network so that you can use other device to scan.

** Run html5 client **

Setup completed, now the client has 3 routes.

locahost:4000/ is protected. You need to login first.

locahost:4000/scan is also protected. You must login to scan to authorized others to login too.

locahost:4000/login you can put any emails with password 123

Run the react client

# Get the machine ip
LOCAL_IP=$(node ip.js)
# Change the endpoint for client to connect
sed -i "s/endpoint\ =\ .*/endpoint\ =\ \"http:\/\/${LOCAL_IP}:4000\"/" client/src/contexts/Socket.jsx
# start the client
cd client && npm i && npm run dev -- --port 3000 --host "0.0.0.0" --open

Setup completed, now the client has 3 routes.

/ is protected. You need to login first.

/scan is also protected. You must login to scan to authorized others to login too.

/login you can put any emails with password 123

NOTE

• Your devices must be in the same local network
• Your phone camera will not work in /scan because it required https to use this feature for security perposes, so use your computer webcam to scan or implement https by yourself.

Usage

1. First device, go to /login using: [email protected]
2. First device, go to /scan
3. Second device, go to /login the open the QR tab
4. Second device, one authorization completed, the device with redirect it self to / showing JSON below.

{ "user": "[email protected]" }