Auth

Auth is a proof-of-concept application that displays the core concepts of the authentication and authorization flow of most modern social media applications.

Preview • Features • Tech Stack • Inspiration • Learning • License • Contact

⚡ Preview

Mobile

Desktop

🎯 Features

• Light/Dark mode.
• Local email authentication via email & password.
• Social authentication integration with Passport.js.
• Register an account with Facebook or Google.
• Reset your forgotten password via email.
• Update your profile name, bio, image, email.
• Change your password.
• Search accounts by name & email.
• Sort accounts by name or date joined.

‎‍💻 Tech Stack

Client

Tech	What for
React	Build a component-based user interface.
Next.js	Server-side rendering (SSR) of React components.
URQL	GraphQL Client for data fetching, caching.
GraphQL	Query language to describe how to interact with the API.
React Hook Form	Form state management and validation.
Moment.js	Parse & display dates.
Chakra UI	Quickly build beautiful UI components.

Server

Tech	What for
Node.js	JavaScript runtime environment.
Express	Design & build the API.
GraphQL	Design & model the application entities.
PostgreSQL	SQL database.
Redis	Store session data in memory for lightning-fast queries.
Sequelize	Interact with the database.
Apollo Server Express	Create a GraphQL server with Express.js.
Passport.js	Simple, secure solution to integrate social authentication.
Sengrid Mail	Send password reset emails.
GraphQL API	HTTP API architecture.

DevOps

Tech	What for
VPS	Secure dedicated cloud server hosting.
Docker	Push & pull enviroments to and from the virtual server.
Vultr	Host the server.
Vercel	Host the client.
Babel	Compile newer versions of JS to vanilla JS.

💡 Inspiration

Authentication & authorization are essential parts of every application. For my first project ever, I wanted to tackle the core principles of the register and login flow, including email password resets, email change, and basic personal profile info updates. I also wanted to closely mimic the process for most modern social media applications, as everyone is familiar with these interfaces.

🚀 Learning Objectives

• Learn GraphQL.
• Build a basic authentication flow.
• Scalable architecture by detaching the client and the server.
• Learn to host a server on a virtual private server.

📜 License

☕ Contact me