Securing React Apps

Securing ReactApp with Auth0

securing reactapp is having two concerns
1-Authentication ? who are you
       Login with email id and password

2-Authorization? what are you allowed to do
       check user rights

popular Auth providers-

Auth0
Okta

what needed to do to setup OAuth

you need to register your react app with the service provider.

you will give them infor- appname, website ,callback url

OAuth Rules-
we need to understand 4 key roles in OAuth
1- Resource owner (User)- account owner ,so if you are a user trying to login to react app you are considering resource owner.

2-Client  (App) -
  client is the app that wants to access the user account .
user must be off the client permission to do so.

3- AuthServer (Auth logic) 
  Auth0

4- Resource Server (user data)
  this is the api application want to access

OAuth 2.0 terminology

• Resource Owner: the entity that can grant access to a protected resource. Typically this is the end-user.
• Client: an application requesting access to a protected resource on behalf of the Resource Owner.
• Resource Server: the server hosting the protected resources. This is the API you want to access.
• Authorization Server: the server that authenticates the Resource Owner, and issues Access Tokens after getting proper authorization. In this case, Auth0.
• User Agent: the agent used by the Resource Owner to interact with the Client, for example a browser or a native application.

OAuth is for authorization - No standard for scopes and user info requests It would be nice to avoid managing passwords ourselves

Authenticate users without managing passwords

Can you send and receive JSON over HTTP? Then you can implement OpenID Connect from scratch.

JSON web token(JWT)

Access Token
Used for authorization and info exchange
Often contains user info
Pronounced “JOT”
Digitally signed
Can be encrypted


Why JWT over SAML?

JSON is less verbose than XML
Smaller when encoded too
Easier to sign than SAML
JSON is easy to parse on the client

JWT Parts