A passkey, a FIDO credential stored on your computer or phone, serves as a secure means to unlock your online accounts, enhancing the overall sign-in security. Employing public key cryptography, the credential's proof of ownership is revealed to your online account only upon unlocking your phone.

For accessing a website or app on your phone, a simple phone unlock suffices, eliminating the necessity for a password in your account.

Similarly, when attempting to sign in on your computer, having your phone nearby is all that's required. You'll receive a prompt to unlock your phone, granting you access on your computer without the need for a password.

, each passkey possesses high strength, rendering them impervious to guessing, reuse, or vulnerabilities.

 public keys alone are retained on servers, diminishing their appeal as targets for hackers.

 is achieved through passkeys being intricately tied to the specific application or website they were generated for, thwarting fraudulent login attempts.

Stored locally and optionally synchronized with Keychain and Google Password Manager, passkeys benefit from end-to-end encryption, shielding them from prying eyes, including those associated with Apple or Google. Passkeys establish a resilient and private connection between users and your application or website.

1) Client requests passkey rules and security question.

The client (such as a web browser or mobile app) requests the rules for creating a passkey and a security question from the server. The server returns a ruleset that specifies the minimum requirements for the passkey, such as its length, complexity, and character types.

2) Authenticator requests human to verify.

The authenticator (such as a fingerprint sensor or face unlock camera) prompts the user to verify their identity. This is done to ensure that only the authorized user is creating the passkey.

3) Authenticator finishes the key pair generation.

The authenticator generates a public-private key pair for the passkey. The public key is shared with the server, while the private key is kept secret on the client device.

4) Client sends public key with signature to the server.

The client sends the public key to the server, along with a signature generated using the private key. This signature proves that the client possesses the private key.

5) Server verifies and stores the public key.

The server verifies the signature and stores the public key. The public key is used to authenticate the client in the future.

6) Client is notified of the success of the process.

The client is notified that the passkey creation process was successful. The client can then use the passkey to authenticate to the server.

The passkey authentication process is as follows:

The client (such as a web browser or mobile app) requests an authentication from the server. The server responds with a challenge, which is a unique string of characters.

 The authenticator (such as a fingerprint sensor or face unlock camera) prompts the user to verify their identity. This is done to ensure that only the authorized user is authenticating with the server.

 using private key and sends to client: The authenticator generates a signature of the challenge using the user's private key. The signature is a unique value that proves that the user possesses the private key.

Client sends the signed challenge to the server: 

The client sends the signed challenge to the server. The server verifies the signature using the user's public key.

Server verifies the signature wrt the public key:

 The server verifies the signature against the user's public key, which is stored on the server. If the signature is valid, then the server knows that the user possesses the private key and is therefore authorized to access the server's resources.

If the signature is valid, the server generates a session token and sends it to the client. The client can then use the session token to access the server's resources without having to authenticate again.

The passkey creation process is typically performed once, when the client first registers with the server.
Also in the case of ios, if the icloud keychain feature is not turned on, user will be prompted to do so.
In the case of android, user needs to be signed in with a google account.

Passkeys are the future of online authentication. They are more secure, easier to use, and more convenient than passwords.

Imagine a world where you don't have to remember a single password. Where you can sign in to any website or app with just a tap of your finger or a glance at your face. That's the world that passkeys are making possible.

Passkeys are based on public key cryptography, which is the same technology that underpins HTTPS and other secure communication protocols. This means that passkeys are resistant to phishing and other online attacks.

To use a passkey, you simply need to unlock your device with your fingerprint, face scan, or PIN. Your device will then generate a unique cryptographic proof that you are the authorized user. This proof is then sent to the website or app you are trying to sign in to.

Unlocking Security: A Guide to Passkeys and Authentication

Here are some tips to measure the performance of a React Native app:

Use performance monitoring tools: Tools such as React Native Debugger, React-Native-Perf-Monitor, and Flipper can give you detailed information about the performance of your app, including CPU and memory usage, frame rate, and other metrics.

Measure app startup time: The time it takes for your app to start up can have a significant impact on the user experience. You can use performance monitoring tools to measure the startup time of your app and identify areas that can be optimized.

Monitor the frame rate: A low frame rate can cause the app to appear slow and unresponsive. Use performance monitoring tools to measure the frame rate of your app and identify areas where performance can be improved.

Measure the time it takes for the app to render: A slow rendering time can also cause the app to appear slow and unresponsive. Use performance monitoring tools to measure the rendering time of your app and identify areas where performance can be improved.

Monitor network performance: Network performance can have a significant impact on the user experience, especially in apps that rely heavily on network requests. Use performance monitoring tools to measure network performance, including the time it takes for requests to complete and the amount of data being transferred.

Monitor memory usage: Memory leaks can cause the app to crash or become unresponsive. Use performance monitoring tools to measure memory usage and identify areas where memory leaks may be occurring.

Test on multiple devices: It is important to test the performance of your app on a variety of different devices, including older and lower-end devices, to ensure that it performs well across a wide range of hardware.

Use Redux-devtools: It's a powerful tool that can help you optimize your Redux-based apps, it gives you a lot of information about the app's state and how it changes over time.

Use profilers: Xcode and Chrome DevTools provide a built-in performance profiler that can help you identify and fix performance bottlenecks in your React Native app.

Average your benchmarking measures over several tests and keep the same condition for every measure.

These are just a few tips to measure the performance of a React Native app. It is important to use a combination of different tools and techniques to get a comprehensive understanding of the app's performance and identify areas that can be improved.

Tips to measure react native apps performance

When we talk about performance we often tend to look for getting atleast 60 FPS. Why 60 FPS you ask?
60 FPS (frames per second) is considered the minimum standard for a smooth and responsive user experience in apps. This is because the human eye can perceive motion at a rate of around 60 FPS, so if an app's frame rate is lower than that, the motion will appear choppy and the user will perceive the app as slow or unresponsive.
 
There are several tools that can be used to analyze the performance of React Native apps, including:

React-Native-Perf-Monitor: A performance monitor that can be added to your app to track CPU and memory usage, frame rate, and other performance metrics. It gives you detailed view like:
To open up the the perf monitor:
Open up the developer menu in your app and toggle Show Perf Monitor. You will notice that there are two different frame rates.

React Native Debugger: This is a standalone app that allows developers to debug their React Native apps and inspect the performance of the app's components.


React Developer Tools: This is a browser extension for Chrome and Firefox that allows developers to inspect the components and performance of their React Native apps.

Flipper: This is a performance analysis tool that can be used to debug and optimize React Native apps. It allows developers to inspect network requests, view logs, and profile the app's performance.

Systrace: This is a tool that allows developers to trace the performance of their React Native apps by capturing detailed performance information about the app's JavaScript and native code.


Measuring your React Native App performance 

Apple silicon Macs (M1, M1 pro) uses different CPU architecture and different instruction set than their intel counterpart. This means there are three types of apps available for MacOS:

You are likely to run into an app that just runs on x86 yet. For this apple has introduced 'Rosetta'.

You're asked to install Rosetta the first time you open an 

. Click Install, then enter your user name and password to allow installation to proceed.

It is possible, if your facing an error message involving x86 in error logs, try opening the app using Rosetta. For opening the app using rosetta, lets say you want to open Xcode with Rosetta, go to finder → applications → XCode → GetInfo → Click on open with Rosetta

This could potentially save you from many nasty errors while developing.

Tip on developing React Native apps with Mac M1 

React Native as most of us know, is an open source UI library developed by meta to create cross platform applications using Javascript('React' to be precise).

React Native creates truly native apps. Way it does is quite interesting:
 

The core React Native components are mapped directly to the native UI building blocks:

So RN components as shown above are mapped to the corresponding Native Elements.

It is awesome that we can write our code using 'React', which is a 'javascript' library and the end product we get is a native app. How does this conversion take place? Is Javascript compiled to Native code?

First of all, Javascript can't be compiled to the native code because of the reason that Javascript is dynamically typed language, while C/C++ or Java i.e. Native languages are statically typed. 

So if Javascript is not compiled to the Native code, how exactly are the 'React Native Components' mapped to the 'Native ones'. To understand this concept you need to understand how threading model of React Native works:

When we run a React Native project with either:


A packager is run, which bundles all of your code into a single file known as:


 is spawned. The 'main thread', looks for entry inside the ios or the android folder in your project.
The 'main thread' opens up

 'JavaScript Virtual Machine or JS Thread'. 

All of our JS Code then runs on our JS Thread.

The bridge is the concept that provides a way for bi-directional and asynchronous communications between Native and Javascript Realm.

The React native bridge is built using C/C++ and can be run on the multiple platforms. It embeds Apple JavascriptCore framework, which lets us access JS core VM functionality.

This basically means that JS code can be run inside C/C++ program injecting functions and variables 

How does react native work

) uses ReactJS (JS Library for building UI) to create apps for ios, android and web using single codebase.
As React uses web elements to create components (

 uses native elements that exists on ios or android.
React Native philosophy is Learn once, write anywhere

', which are logical reusable piece of code. When we interact with a React Native app, we make changes to the UI, which can be in form of state or props. These can be used to build your logic surrounding the interactions and events.

For creating mobile apps you would use components such as:


: Most fundamental component for building UI, its a container that supports layout


Now at the runtime, it will use the native component implemented by the platform, so View in React Native changes to '

With RN, you can obviously tap into the native features given by the platform like:


React Native like React has one of the most active open source communities. You can install packages like any other Javascript project. RN has gained lot of popularity in recent times and really grown out to be a mature platform supporting many big projects and promising many more opportunities. 

React native in 2 minutes

React is a Javascript(JS) library, developed by facebook in 2013. 

Main differentiating factor between React and other JS frameworks and libraries was the JSX(Javascript Syntax and XML), it allowed users to put in HTML inside JS Code.

But main reason for React's rise to the top was the concept of 'virtual DOM'. 

Elements in web can be represented as DOM tree:

Whenever you interact on a webpage, the change is reflected to the DOM tree. While the updates to the DOM take time, the updates to the virtual DOM can be done faster. The changes are then batched together and sent to update the Real DOM
<Virtual DOM image>

We make use of components in React, which are logical reusable piece of code. Components can be written in a form of either classes, or as simply as a function.

The return value from the functions can be in a form of JSX, which is later transpiled into regular markup so that browsers can understand.

When we interact with a React app, we make changes to the UI, which can be in form of:

Props: Arguments passed into a component
State: Internal state of a component

React has a massive ecosystem surrounding itself, you can use any open source libraries to go along react, for example:
For Forms: Formik
State Management: Redux, Flux, Mobx

For Server Side Rendering: Next.js
For Static sites: Gatsby

React is the most popular UI library of the recent times, and comes with lots of Jobs if you decide to keep it in your kitty. 

React in 2 minutes

A technology stack is a 'Set of technological tools and programming languages that help you build and ship a digital product'. Today we are going to explore on an 'unpolpular opinion: Configuring a stack is more complicated than writing the code'.

Lets jump right to it, suppose a company wants to launch a digital product, what all would they have to consider:

For the simplicity, we would not mention defacto standards by mentioning defacto standards like HTML, JSONs or getting into things like package managers or going too deep by exploring third party libraries for every technology, as they are not the product decisions but rather can be dealt by developers and should be. Also there are a ton of different tools that would be added, if we decide to look at marketing the app, and since they can be added in later, lets skip them for now.


* Javscript vs Typescript
* UI framework : Too many options to pick up here like React, Angular, Vue
* State Managment: Redux, Mobx, hookstate
* CSS framework: Bootstrap vs Tailwind
* CSS preprocessor: To add CSS more efficiently(Sass or not)
* Post CSS: To purge unused CSS- purge vs minify
* Module bundler: Webpack: To combine our multiple JS files and use it as a bundle to run on a browser

Two options here, which will have options of their own:
* Native: Objective C vs Swift
* Hybrid: React Native vs Flutter vs Ionic


Two options here, which will have options of their own:
* Native: Java vs Kotlin
* Hybrid: React Native vs Flutter vs Ionic

 - First choice you will have to make is to consider kind of database-
   * Realational Database: Collection of data-items which would have defined realationship between them, organised as a set of tables with columns and row
Examples: Microsoft SQL Server, Postgress, Oracle Database, MySQL and IBM DB2.
   * Non Relational Database: Does not contain a tabular schema of rows and columns found in most traditional databases, they are optimised for a specific requirement
Examples: Couchbase, MongoDB, Apache Cassandra, Cloud firestore
Apart from this you would have to consider if this is going to be fast enough for you? Do you require an in-memory database to help you solving that problem?
Redis or Memcached can be a couple options that you might want to consider.


In order to serve data from the database to the frontend, we need to pick our poison: Backend programming language. There are a ton to choose from following -
NodeJS, java, python, go, rust, php to name a few.
Framework:
Choosing a right framework for the programming language you chose, example:
Python: Django, Flask
PHP: Codeigniter, Laravel
Java: Spring
NodeJS: Express, Next, Meteor


Now depending on the type of Database and programming language that you just selected, you would have to consider bringing in an ORM.


 stands for Object Relational Mapping, it would help you encapsulate the code needed to manipulate the data, so you don't write raw SQL anymore rather interact with data using the programming languae that you write. Some ORMs for popular languages are:
Java: hibernate, ebean
Nodejs: Bookshelf, Sequalize, typeorm
Php: Doctrine, propel


By chossing a programming language above, we now have the capability of 'writing an executable code on a server', but in order for that server to be made available to the internet, we would need a web server:
Nginx or Apache are the most popular options


Choosing between Server driven architecture(REST) or a client driven architecture( GraphQL)


You might want a payment integrations, as they are too complex to build on your own, and you might not want to re-invent the wheel, and most popular ones to choose from are:
Stripe, paypal, razorpay, securePay


Send messages to users using- Twilio or messagebird or plivo


AaaS or Authentication as a service has come up to save from trouble of doing this, as experts agree that authentication remains the weakest part of the cloud security. AaaS works by giving services like multi-factor authentication, single sign-on and password management. Bunch of options one might consider are:
Auth0, AWS Cognito, Firebase Auth


Today CMS(Content Management System) is a critical layer between your Frotend and your backend. Headless CMS turns your CMS as a cloud based APIs that can be accessed from any application. And because it is decoupled from your code and user database, you can integrate it with any application with any tech based framework.
You can choose between: Sanity.io, Contentful and Strapi


Gone are the good old days where in you could log in the servers, grep through the logs to figure out an issue, now in the advent of cloud services, cloud based logging services aim to ship your logs securely and helps you access them. Consider following: Sematext, logDNA, SolarWinds Papertrail


You might be building an app where in you want a seamless fast searching through your database, that is where ElasticSearch will help you out. You might want to integrate Kibana and Logstash too with Elasticserach


Your application, could have a complex nature for a specific part. Wasm (Web Assembly) can be helpful here by defining a 'portable binary-code format', which can be executed on a Virtual machine that runs in browser.


Before we even think of that, we need to standardise the environment for our code by containerising it by docker, this creates a standard linux environment that helps us deploy our code to any cloud server.
So we would need to bring in Docker.


As our app grows we might need to figure out orchstrating multiple containers and for that we bring in the Kubernetes


Now we would need to host all this infrastrucure together, so we will have to choose from: AWS(Amazon Web Services), GCP(Google Cloud Provider), Microsoft Azure are the most famous ones.


Now since we have hired a smart bunch of people for the jobs, we might have to consider writing code to programatically create pur infrastructure and version it for better reliability, rather than going to AWS website and clicking buttons. We would choose, terraform by Hashicorp.


We would need a place to host our source code too and have a version control like git or SVN, best place to choose would be from:
Github, bitbucket, gitlab


A CI/CD pipeline is a series of steps that must be executed, in order to deliver a new version of a software, basically automating software delivery process.

Apart from these, there could be a host of different technologies, services and tools available to make things work like:
Archiving, using CDNs, managing certifications, security layers and protocols, sockets. The Cloud providers have the complex architectures of their own. Users have a hard time understanding which AWS service to use at what time and to be honest, there exists a ton of them now.

This has gone out of hand too fast. Although you don't have to go integrate all of the points mentioned above, and can skip many of it, many of the applications would have all of the features mentioned above and much more.
Although we can wrap things up by summarising that there are four major factors in my opinion that govern a tech stack:
1) Customisation needed for building the right app
2) Scalabilty that comes along when a business or app grows
3) Integrations that you look forward to doing
4) Affordability: Some of the tools are open source, while other come with a huge price tag.

But still with multitudes of tech stacks available, and new one dropping every week, it is getting hard for the companies to pick the right one.

Blogs

Unlocking Security: A Guide to Passkeys and Authentication

Empower Your Security: Embrace Passkeys for a Fortress of Digital Protection!

Tips to measure react native apps performance

Mastering Metrics: Essential Tips for React Native App Performance

Measuring your React Native App performance

Optimize and Thrive: Measuring Your React Native App Performance

Tip on developing React Native apps with Mac M1

Revolutionize Development: Top Tips for React Native on Mac M1

How does react native work

Unveiling the Magic: How React Native Works Demystified

React native in 2 minutes

Rapid Revelation: React Native Unveiled in Just 2 Minutes

React in 2 minutes

React in a Blink: A Quick Dive into React in Just 2 Minutes

Dilemma posed by multiple technology stacks

Navigating the Maze: Resolving the Dilemma of Multiple Tech Stacks