Ukey1 SDK for React
This repository contains the open source React SDK that allows you to access the Ukey1 API from your React app.
!!! Please note that versions older than 2.0.0 are deprecated and don't work since November 15, 2017 !!!
About Ukey1
Ukey1 is an Authentication and Data Protection Service with the mission to enhance security of websites. The service is designed to help you with EU GDPR compliance.
Ukey1 flow for this React SDK
- User clicks to "sign-in" button
- you can use our unified sign-in button if you want
- SDK sends a connection request to our API and gets a unique Gateway URL
- User is redirected to Ukey1 Gateway
- User signs in using their favourite solution and authorizes your app
- User is redirected back to predefined URL
- SDK checks the result and gets a unique access token - user is authenticated
- That's it - user is authenticated (your app can make API calls to get user's data)
API specification
Requirements
- react ^15.2.0
- react-device-storage ^1.0.0
- popsicle ^9.1.0
Installation
npm install --save ukey1-react-sdk
Usage
First, you need your App ID. Remember that React SDK serves for client-side apps, so you won't need the Secret Key! In our dashboard, we also recommend to activate Domain and Return URL Protection.
Example
First, let's see how to redirect user to Ukey1 Gateway...
;; const UKEY1_APP_ID = 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'; // ... { e; let options = appId: UKEY1_APP_ID // This is an URL for redirection back to the app // Do you know what is absolutely perfect? // - it may be unique // - it may contain query parameters and/or fragment returnUrl: 'http://example.org/login?action=check&user=XXX#fragment' // See the full list of permissions: https://asaritech.github.io/ukey1-docs/Docs/Permissions/#data-fields scope: 'firstname' 'email' ; try ; catch error console; } { return <div> <a href="#" className="ukey1-button" onClick=thisloginEvent>Sign in via Ukey1</a> </div> ; } ;
Once the user authorizes your app, Ukey1 redirects the user back to your app to the URL you specified earlier. The same is done if user cancels the request. You have to handle the event and call authorization method like this:
// ... { let options = appId: UKEY1_APP_ID { // This callback is called when user is successfully authorized // And do whatever you want // Possible `dataObj` usage: let userId = dataObjid; // Please note that everything excepts ID and mandatory fields may be empty if the user decides to not to grant you access to that field let userFirstname = dataObj; let userEmail = dataObj; } { // This callback is called everytime (even if request is successful or not) } ; try ; catch error console; } // ...
We have also prepared a working example - get to know how to implement our SDK quickly!
License
This code is released under the MIT license. Please see LICENSE file for details.
Contributing
If you want to become a contributor of this React SDK, please first contact us (see our email below). If you would like to work on another SDK (in your favorite language), we will glad to know about you too!
Contact
Reporting of any issues are appreciated. If you want to contribute or you have a critical security issue, please write us directly to developers@asaritech.com.