Contactless Authentication System

Atlis is a contactless authentication system designed to facilitate secure data transfer and user authentication via QR codes. The system is tailored for developers, offering an easy-to-integrate npm package that enables passwordless authentication through QR code scanning. Below is a detailed breakdown of the architecture, components, and flow, combining both developer and user experiences.

1. Landing Page (Helsinki)

• Repository: https://github.com/ChristianPickettCode/helsinki
• Functionality: This landing page introduces Atlis to developers, highlighting its core feature: contactless data transfer using QR codes for passwordless authentication. It serves as the main entry point for developers and users, hosted at atlis.dev.
• Includes installation instructions, such as how to install the Atlis npm package and wrap their applications in the <Atlis /> component.
• Developer Flow:
  • Developers install the package using yarn add atlis or npm install --save atlis.
  • They specify appName, apiKeyID, and the user data to be retrieved, such as name and email.
  • This setup triggers the connection to the WebSocket server for the contactless authentication flow.

2. Atlis NPM Package

• Repository: https://github.com/ChristianPickettCode/atlis
• Functionality: The npm package is the core library that developers integrate into their React applications. It simplifies the process of generating QR codes for contactless authentication.
• Developer Flow:

  • Developers wrap their React application components with <Atlis /> and provide appName, apiKeyID, and the required user data (like name and email).

  • The package first connects (with action=connect) to the WebSocket server (Berlin), which creates a connection record in DynamoDB.

  • Upon connection, the package receives a response from the server and generates a QR code URL:

    https://app.atlis.dev/welcome?requestID=${connectionID}&data=${resData}

    • where resData is JWT signed with the connectionID.

import React from 'react'
import Atlis from 'atlis'

const App = () => {
    return(
        <Atlis 
            request={{ 
                data: ["email", "name"], // "name" is optional
                appName: "your app name", 
                appID: "your app id" }}>
            <Home />
        </Atlis>
    ); 
}

export default App;

3. WebSocket Bridge (Berlin)

• Repository: https://github.com/ChristianPickettCode/berlin