Simplify React App Login with Asgardeo React SDK

Today’s Lineup
● Challenges in adding login to React
● Managing user accounts
● Asgardeo Javascript SDKs
● Integrate your application with Asgardeo
⦿ Create a React application with Vite
⦿ Implement the two basic components
⦿ Install Asgardeo React SDK
⦿ Integrate your React application with Asgardeo
⦿ Implement login and logout buttons
● Application security best practices
Practical Session

Nipuni Paaris
01
Associate Technical Lead @ WSO2
x

Challenges in Adding Login to
React

Navigating challenges in adding login to React
5
State management
Handling authentication state across different components
Security
Ensuring secure transmission and storage of user credentials
Token management
Managing access tokens and refresh tokens
Token processing
Accessing the session tokens and extracting attributes and roles
Session management
Maintaining user sessions and handling session expiration
1
2
3
4
5

Navigating challenges in adding login to React
6
Redirects and routing
Handling redirects post-login and ensuring secure routes
User experience
Creating a seamless and intuitive login experience
Third-party integrations
Integrating with third-party authentication providers
Role-Based Access Control (RBAC)
Implementing and managing user roles and permissions
Error handling
Properly handling and displaying authentication errors
6
7
8
9
10

In-App user management and login
Out-of-the-Box Identity
Providers
Getting started with user management in your
application

Social login
User authorization
Multi factor authentication (MFA)
Application insights
User registration
API Access
User login
Consent management
Single sign-on (SSO)
Password reset Account locking

Focus solely on your
business capabilities!
Integrate your app with an
OOTB Identity Provider
And

Why DIY when you can ﬂy?
● Enhanced security
⦿ Multi-Factor Authentication (MFA)
⦿ Secure token storage
⦿ Continuous updates
⦿ Advanced threat detection
● Reduced development effort
⦿ Speed up implementation
⦿ Focus on core features
⦿ Reduce maintenance burden
● Scalability and compliance

● Streamlined user experience
⦿ Seamless login processes
⦿ Consistent user interface
⦿ Reduced password fatigue
● Support for modern authentication protocols
● Centralized user management and governance
⦿ User provisioning and de-provisioning
⦿ Role-Based Access Control (RBAC)
⦿ Audit and reporting
● Seamless integration with third parties

Asgardeo Javascript SDK
(@asgardeo/auth-js)
Asgardeo SPA SDK
(@asgardeo/auth-spa)
Asgardeo Node SDK
(@asgardeo/auth-node)
Asgardeo React SDK
(@asgardeo/auth-react)
Asgardeo Angular SDK
(@asgardeo/auth-angular)
Asgardeo Express SDK
(@asgardeo/auth-express)

Step 01: Setup the initial React application
# Following command is used to create a new react project usingVite
# You can replace react-sample with your project name
# You can also replace react with react-ts if you need to use
Typescript.
npm create vite@latest react-sample -- --template react

Step 02: Create the ﬁrst components
// The home page component.
export const HomePage = () => {
return (
<div>
<h1>
Welcome to the HomePage!
</h1>
<p>
This is the content of the
page.
</p>
</div>
);
}
// The landing page component.
export const LandingPage = () => {
return (
<div>
<h1>
Welcome to the LandingPage!
</h1>
<p>
This is the content of the
page.
</p>
</div>
);
}

Step 03: Install the Asgardeo React SDK
# Run the following command to install @asgardeo/auth-react from
the npm registry.
npm install @asgardeo/auth-react --save

Step 04: Integrate your application with Asgardeo
// Import and wrap your root component with the AuthProvider.
// AuthProvider takes a config object as a prop that can be used to initialize the SDK
instance.
const config = {
signInRedirectURL: "http://localhost:5173",
signOutRedirectURL: "http://localhost:5173",
clientID: "YOUR_APP_CLIENT_ID",
baseUrl: "https://api.asgardeo.io/t/{tenant}",
scope: [ "openid", "profile" ]
};
ReactDOM.createRoot(document.getElementById(“root”)).render(
<React.StrictMode>
<AuthProvider config={ config }>
<App />
</AuthProvider>
</React.StrictMode>,
);

Key beneﬁts of Asgardeo Javascript SDKs
● Integrate OAuth 2.0 and OpenID Connect (OIDC)
into JavaScript applications.
● Follows identity and access management best
practices.
● Protection against common vulnerabilities such as
XSS.
● Automatic token refresh and secure storage.
● Integrates well with other vendors.
● Cross-platform compatibility with various
JavaScript frameworks and libraries.

Hacker Victim
Trusted website
Hacker injects the
malicious script
Victim triggers the
malicious script
Victims browser executes the malicious script and
unknowingly send information to the hacker
Cross-site scripting (XSS)

Does React make you immune to
XSS?
YES

<div dangerouslySetInnerHTML={{__html:”<script>alert(“XSS!”);</script>”}}/>
// OR
this.myRef.current.innerHTML = ”<script>alert(“XSS!”);</script>”;
Don’t do this

import DOMPurify from "dompurify";
<div dangerouslySetInnerHTML={{__html:DOMPurify.sanitize(data) }} />
Sanitize and render HTML

const maliciousUrl = “javascript:alert(1)”;
<a href={ maliciousUrl }>Click here!</a>
Don’t do this

function validateURL(url) {
const parsed = new URL(url)
return ['https:', 'http:'].includes(parsed.protocol)
}
<a href={validateURL(url) ? url : ''}>Click here!</a>
Validate URL inputs

When an application incorrectly implement access control, logged in users might get
permissions to do operations beyond their designated limits through hacks. Which
mostly happens through access token leaks.
This will lead to:
Broken access control
● Unauthorized information disclosure.
● Data modiﬁcation or destruction.

OR
Local/Session storage Web worker
Storage mechanisms in Asgardeo React SDK

References and further reading
● Simplify React App login:
https://medium.com/identity-beyond-borders/simplify-react-app-logi
n-3bcaa166ded0
● Asgardeo React SDK:
https://github.com/asgardeo/asgardeo-auth-react-sdk
● OWASP Top 10: https://owasp.org/www-project-top-ten
● Asgardeo official documentation:
https://wso2.com/asgardeo/docs/get-started/try-your-own-app/java
script/

Simplify React App Login with Asgardeo React SDK

More Related Content

Similar to Simplify React App Login with Asgardeo React SDK (20)

Recently uploaded (20)

Simplify React App Login with Asgardeo React SDK