Authentication

Introduction

As a developer, it's your responsibility to ensure that the applications you create are secure for their users. Authentication is an important part of web development because it verifies the identity of a user and grants them access to the appropriate resources. When implemented correctly, authentication can prevent unauthorized access, protect user information, and ensure that your application is secure. In this blog post, we'll take a closer look at why authentication is crucial in web development and how you can implement it effectively.

Authentication VS. Authorization

• Authentication:

  1. Definition: This is the process of confirming the user's identity. Simply put, it is to ensure that the user is the person they claim to be.

  2. How to achieve: In mobile applications, this is usually achieved through user name and password, fingerprint, facial recognition, SMS verification code, etc.

  3. Purpose: To prevent unknown or untrusted entities from accessing the system.

  4. Example: When you open an application that requires you to log in, such as an email application, you must enter your username and password. Only when this information matches the stored information will you be considered to have "verified" your identity.

• Authorization:

  1. Definition: Once the identity is verified, the authorization determines what the user can do. In other words, it determines what authenticated users can do.

  2. How to achieve: In mobile applications, this is usually achieved through a permission management system, which determines which roles or users can perform specific operations or access specific resources.

  3. Purpose: To ensure that users can only perform the operations they are authorized to perform.

  4. Example: In a file sharing application, even if you have logged in (authentication), you may still not be able to access certain files unless you are authorized (authorized).

• Conclusion:

  Authentication is to determine who you are, while authorization is to determine what you can do.

Use the power of FireBase

• Authentication pillar in FireBase project

  • Authenticate and manage users from a variety of providers without server-side code

• FireBase Installation by using Expo

• FireBase Initialization and Configuration in App.js

• FireBase Authentication Get Started

• Adjust Navigator according to <AuthenticationContextProvider></AuthenticationContextProvider>

  • Check whether it is authenticated through useContext(AuthenticationContext).
    • If authenticated, go to aappNavigator.
    • Otherwise, go to accountNavigator.

• ImageBackground in React Native

• Button in react-native-paper

• Login Page

• Register Page

• Context should only be used in the spot where it's necessary

Animation

• Expo Lottie

• using Lottie animation library

• Lottie React Native Github

• Summary:

  • Based on this, I can transfer After-Effects(AE) file in Adobe to JSON file that used in Mobile App and Web Development
  • Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them natively on mobile and on the web!

Setting Page

• Create settings page's components and screens

Polish

• After compeleting main logic of the app development, I consider the process of polishing

  • Animation is the first consideration
  • React Native Animation
  • React Native provides two complementary animation systems: Animated for granular and interactive control of specific values, and LayoutAnimation for animated global layout transactions.

• useRef hook should be used correctly

• useEffect hook should be used to track animation process

• App Icons

• Expo Publish

  • use EAS updates