React Native SDK is no longer encouraged and enriched by Asgardeo and may not work with the latest versions.
You can implement login using Authorization Code flow with PKCE with Asgardeo using OIDC standards.
Repository containing the source of Asgardeo React Native OIDC SDK & Samples.
🚧  This project is a work in progress. Please do not use this yet!
Asgardeo's OIDC SDK for React Native allows mobile applications to use OIDC or OAuth2 authentication in a simple and secure way. By using Asgardeo and the React Native OIDC SDK, mobile application developers will be able to add identity management to their mobile applications with more ease.
Install the library from the npm registry.
npm install --save @asgardeo/auth-react-native
You can experience the capabilities of Asgardeo React-native OIDC SDK by following this small guide which contains main sections listed below.
-
Start the WSO2 Identity server. If you haven't downloaded yet, please visit https://wso2.com/identity-server/ and download the latest version of the Identity server.
-
Create a service provider/ application in WSO2 IS and configure it following one of the procedures mentioned below.
-
Login to WSO2 IS management console from https://localhost:9443/carbon/ and navigate to the Service Providers tab listed under the Identity section.
-
Click Add to add a new service provider.
-
Provide a name for the Service Provider (ex:- sampleRN-app) and click Register. Now you will be redirected to the Edit Service Provider page.
-
Expand the Inbound Authentication Configuration section and click Configure under the OAuth/OpenID Connect Configuration section.
-
Under Allowed Grant Types uncheck everything except
CodeandRefresh Token. -
Enter Callback URL(s) as for the following values.
Callback Url:
wso2sample://oauth2
Alternatively if you're running in an emulator, you can use
http://10.0.2.2:8081as the callback url.
-
Check Allow authentication without the client secret.
-
Click Add button to add the OAuth configurations.
-
Once the configurations are added, you will be redirected to the Service Provider Details page. Here, expand the Inbound Authentication Configuration section and click on the OAuth/OpenID Connect Configuration. Copy the value of
OAuth Client Keyshown here.
-
Make sure to click the
Updatebutton to save the changes.
Alternatively, you can create a Custom Application directly from the Identity Server Console.
-
Login to WSO2 IS console from https://localhost:9443/console/login and visit Applications section.
-
Click on New Application button and select the Custom Application template.
-
Provide a unique name to identify your application and click Register to complete the registration.
-
Go to the Access tab and click on New Protocol to start adding an authentication protocol.
-
Select OpenID Connect from the Quick Setup and click on Next.
-
Enter the Callback URL(s) as mentioned above and click Next.
-
Click Finish to save the configurations.
-
Under Allowed grant type check
CodeandRefresh Token. -
Check Public client to allow the client to authenticate without a client secret.
-
Copy the value of
Client ID. Make sure to clickUpdatebutton to save the configurations.
-
Clone/download this project from
https://github.com/asgardeo/asgardeo-react-native-oidc-sdk.git. -
Install the dependencies and generate the tar file by running the following command inside the
lib/directory.npm pack -
Add the relevant configuratons to the LoginScreen file located at
sample/screen/LoginScreenfolder.-
Replace the value of
clientIDwith the value ofOAuth Client KeyorClient IDwhich you copied in the previous section of the documentation (configuring the Identity Server).const config = { serverOrigin: 'https://{hostname}:9443', signInRedirectURL: 'http://{hostname}:{port}', clientID: 'ClientID', SignOutURL: "http://{hostname}:{port}" // (Optional) };
Example:
const config = { serverOrigin: 'https://10.0.2.2:9443', signInRedirectURL: 'wso2sample://oauth2', clientID: 'iMc7TiIaIFafkd5hA5xf7kGiAWUa', SignOutURL: "http://10.0.2.2:8081" // (Optional) };
-
-
Install the required dependencies by running the following command inside the
sample/directory.npm install
This application can be run either in an emulator or an actual device. Some configurations may differ depending on the OS.
-
If the WSO2 IS is hosted in the local machine, you have to change the domain of the endpoints defined in
configobject atscreen/LoginScreenfile to10.0.2.2. Refer the documentation on emulator-networking. Next change the hostname of Identity server as10.0.2.2in the<IS_HOME>/repository/conf/deployment.tomlfile. -
By default IS uses a self-signed certificate. If you ended up in SSL issues and are using the default pack without changing to a CA signed certificate, follow this guide to get rid of SSL issues.
-
Sometimes you may get
SSLHandshakeExceptionin android application since WSO2 IS is using a self-signed certificate. To fix this exception, you need to add the public certificate of IS to the sample application.i. Create a new keystore with CN as localhost and SAN as
10.0.2.2.keytool -genkey -alias wso2carbon -keyalg RSA -keystore wso2carbon.jks -keysize 2048 -ext SAN=IP:10.0.2.2ii. Export the public certificate (ex:
wso2carbon.pem) to add into the truststore.keytool -exportcert -alias wso2carbon -keystore wso2carbon.jks -rfc -file wso2carbon.pemiii. Import the certificate in the client-truststore.jks file located in
<IS_HOME>/repository/resources/security/.keytool -import -alias wso2is -file wso2carbon.pem -keystore client-truststore.jks -storepass wso2carboniv. Now copy this public certificate (
wso2carbon.pem) to theapp/src/main/res/rawfolder.v. Create a new file named
network_security_config.xmlinsample/android/app/src/main/res/xmlfolder and copy the below content to it. Make sure to replacewso2carbonwith the certificate name you added.<?xml version="1.0" encoding="utf-8"?> <network-security-config> <domain-config cleartextTrafficPermitted="true"> <domain includeSubdomains="true">localhost</domain> <domain includeSubdomains="true">10.0.2.2</domain> <trust-anchors> <certificates src="@raw/wso2carbon"/> </trust-anchors> <domain includeSubdomains="true">192.168.43.29</domain> <base-config cleartextTrafficPermitted="true"/> </domain-config> </network-security-config>
vi. Then add the following config to the
sample/android/app/src/main/AndroidManifest.xmlfile underapplicationsection.android:networkSecurityConfig="@xml/network_security_config"
Now the
AndroidManifest.xmlfile should look like below.<?xml version="1.0" encoding="utf-8"?> <manifest ... > <application android:networkSecurityConfig="@xml/network_security_config" ... > ... </application> </manifest>
-
Create a suitable Android virtual device using the Android virtual device manager (AVD Manager) and launch it.
-
Build and deploy the apps by running the following command at the root directory.
react-native run-android
-
Enable Debugging over USB and plug in your device via USB.
-
Build and deploy the apps by running the following command at the root directory.
react-native run-android
If you're running in a development or debugging mode, start the Metro by running the following command.
react-native startThis is a React Context Provider that provides the session state that contains information such as the authenticated user's display name, email address, etc., and the methods that are required to implement authentication in the React native app.
Like every other provider, the AuthProvider also encapsulates the components that would need the data provided by the provider.
This is a React hook that returns the session state that contains information such as the email address of the authenticated user and the methods that are required for implementing authentication.
const { state, initialize, signIn } = useAuthContext();The object returned by the useAuthContext has a state attribute the value of which is an object of type AuthStateInterface. You can refer the link to know more about what data is contained by the state object.
In addition to the state object, the hook also returns the following methods.
initialize: (config: AuthClientConfig) => Promise<void>;- config:
AuthClientConfigThe config object containing the attributes that can be used to configure the SDK. To learn more about the available attributes, refer toAuthClientConfigmodel.
This method initializes the auth client with the config data.
const config = {
clientID: 'iMc7TiIaIFafkd5hA5xf7kGiAWUa',
serverOrigin: 'https://10.0.2.2:9443',
signInRedirectURL: 'wso2sample://oauth2'
};
await initialize(config);getDataLayer: () => Promise<DataLayer<any>>;dataLayer: DataLayer
A DataLayer object which wraps the Store object passed during object instantiation and provides access to various types of data used by the SDK. To learn more about the various types of interfaces provide by the DataLayer, refer to the Data layer.
This method returns DataLayer objects used by the SDK to store authentication data.
const _dataLayer = await getDataLayer();getAuthorizationURL: (config?: GetAuthURLConfig) => Promise<string>;-
config:
GetAuthURLConfig(optional) Config object that has the necessary attributes to configure this method. TheforceInitattribute can be set totrueto trigger a request to the.well-knownendpoint and obtain the OIDC endpoints. By default, a request to the.well-knownendpoint will be sent only if a request to it had not been sent before. If you wish to force a request to the endpoint, you can use this attribute.The object can only contain key-value pairs that you wish to append as path parameters to the authorization URL. For example, to set the
fidpparameter, you can insertfidpas a key and its value to this object.
This method returns a Promise that resolves with the authorization URL. The user can be redirected to this URL to authenticate themselves and authorize the client.
getAuthorizationURL(config).then((url) => {
Linking.openURL(url);
}).catch((error) => {
console.error(error);
});signIn: () => Promise<void>;As the name implies, this method is used to sign-in users. This method will work in two phases. The first phase generates the authorization url and takes the user to the single-sign-on page of the identity server, while second phase triggers the token request to complete the authentication process. So, this method should be called when the user clicks on the Sign in button and should listen for the authentication state for state update inorder to proceed with the signin.
signIn()
.catch((error: any) => {
console.log(error);
});
useEffect(() => {
// Steps after the authentication should come here.
...
}, [ state.isAuthenticated ]);getAccessToken: () => Promise<string>;accessToken: Promise<string> A Promise that resolves with the access token.
This method returns the access token stored in the store.
const accessToken = await getAccessToken();getBasicUserInfo: () => Promise<BasicUserInfo>;basicUserInfo: Promise<BasicUserInfo> An object containing basic user information obtained from the id token.
This method returns the basic user information obtained from the payload. To learn more about what information is returned, checkout the BasicUserInfo model.
const userInfo = await getBasicUserInfo();getDecodedIDToken: () => Promise<DecodedIDTokenPayload>;decodedIDTokenPayload: Promise<DecodedIDTokenPayload> The decoded ID token payload.
This method decodes the payload of the id token and returns the decoded values.
const decodedIdToken = await getDecodedIDToken();getIDToken: () => Promise<string>;idToken: Promise<string> The id token.
This method returns the id token.
const idToken = await getIDToken();getOIDCServiceEndpoints: () => Promise<OIDCEndpoints>;oidcEndpoints: Promise<OIDCEndpoints>
This method returns the OIDC service endpoints obtained from the .well-known endpoint.
const oidcEndpoints = await getOIDCServiceEndpoints();getSignOutURL: () => Promise<string>;signOutURL: Promise<string> Signout url
This method returns the sign-out URL to which the user should be redirected to be signed out from the server. The user should be redirect to this URL in order to sign out from the server.
const signOutUrl = await getSignOutURL();
Linking.openURL(signOutUrl);signOut: () => Promise<void>;As the name implies, this method is used to sign-out users. This method will work in two phases. The first phase obtains the signout url and takes the user to the signout page of the identity server, while second phase clears the authentication data from the store upon successful sign out redirection. So, this method should be called when the user clicks on the Sign out button and should listen for the authentication state for state update inorder to proceed with the signout.
signOut()
.catch((error) => {
console.log(error);
});revokeAccessToken: () => Promise<any>;A Promise that resolves with the response returned by the server.
This method clears the authentication data and sends a request to revoke the access token. You can use this method if you want to sign the user out of your application but not from the server.
revokeAccessToken().then((response) => {
console.log(response);
}).catch((error) => {
console.error(error);
})refreshAccessToken: () => Promise<TokenResponse>;A Promise that resolves with the token response that contains the token information.
This method sends a refresh-token request and returns a promise that resolves with the token response that contains the token information. To learn more about what information is returned, checkout the TokenResponse model. You could listen for the authentication state for state update inorder to proceed.
refreshAccessToken()
.catch((error) => {
console.log(error);
});isAuthenticated: () => Promise<boolean>;isAuthenticated: Promise<boolean> A boolean value that indicates if the user is authenticated or not.
This method returns a boolean value indicating if the user is authenticated or not.
const isAuth = await isAuthenticated();isSignOutSuccessful: (signOutRedirectURL: string) => boolean;- signOutRedirectURL:
stringThe URL to which the user is redirected to after signing out from the server.
This method returns if the user has been successfully signed out or not. When a user signs out from the server, the user is redirected to the URL specified by the signOutRedirectURL in the config object passed into the initialize function. The server appends path parameters indicating if the sign-out is successful. This method reads the URL and returns if the sign-out is successful or not. So, make sure you pass as the argument, the URL to which the user has been redirected to after signing out from the server.
const hasSignOut = isSignOutSuccessful("signOutRedirectURL");requestCustomGrant: (config: CustomGrantConfig) => Promise<any>;- config:
CustomGrantConfigThe config object contains attributes that would be used to configure the custom grant request. To learn more about the different configurations available, checkout theCustomGrantConfigmodel.
A Promise that resolves with the token information or the response returned by the server depending on the configuration passed.
This method can be used to send custom-grant requests to Asgardeo.
requestCustomGrant(config).then((response) => {
console.log(response);
}).catch((error) => {
console.error(error);
});updateConfig: (config: Partial<AuthClientConfig>) => Promise<void>;- config:
AuthClientConfigThe config object containing the attributes that can be used to configure the SDK. To learn more about the available attributes, refer toAuthClientConfigmodel.
This method can be used to update the configurations passed into the initialize function. Please note that every attribute in the config object passed as the argument here is optional. Use this method if you want to update certain attributes after instantiation.
await updateConfig({
signOutRedirectURL: "signOutRedirectURL"
});Please read Contributing to the Code Base for details on our code of conduct, and the process for submitting pull requests to us.
We encourage you to report issues, improvements, and feature requests creating Github Issues.
Important: And please be advised that security issues must be reported to security@wso2com, not as GitHub issues, in order to reach the proper audience. We strongly advise following the WSO2 Security Vulnerability Reporting Guidelines when reporting the security issues.
This project is licensed under the Apache License 2.0. See the LICENSE file for details.