Authenticator

Description

Full-stack application for just authenticating made of TypeScript.

Why I created

To understand how authentication flow works. I thought that the part of authentication is more difficult and important than others when it comes to applications. Also, most applications have an auth feature. So I decided to build it to comprehend every single detail of authentication flow.

Technologies

Language/Libraries

Frone-End

• TypeScript
• React
• Redux
• Emotion
• Material-UI
• Axios

Back-End

• TypeScript
• Express
• MongoDB

Build tool

• Webpack

Lint/Format/Test tools

• ESLint
• Prettier
• Jest

CI/CD tool

• Github Actions

OAuth flow

Architecture

Links

• Production (deployment/production branch)
  • https://authenticator-neon.vercel.app/
• Staging (deployment/staging branch)
  • https://authenticator-neon-staging.vercel.app/

note: Before visiting the website, please disable cross-site tracking permission on chrome or safari settings.

Upcoming Features

• Add JWT authentication
• Add other OAuth providers, such as Facebook and Instagram

References

• passport
• passport-google-oauth20