How to Run the ORE ID Sample App
Take ORE ID for a test drive!
ORE ID makes it easy for users to use the Algorand blockchain from within their applications. This tutorial will teach you how to pull down and run the ORE ID sample app running on the Algorand blockchain on your local machine. You will learn more about how ORE ID works and see the end user login flow.
JavaScript
Requirements
curl -X GET 'https://testnet-algorand.api.purestake.io/ps2/v2/transactions/params' -H 'X-API-Key : <YOUR_API_KEY_HERE>')
- (Recommended) An Integrated Development Environment (IDE). Since this tutorial is a step-by-step tutorial, using an IDE such as VSCode is recommended.
Background
ORE ID is a service that allows you to add user authentication to your application. It uses standard OAuth flows to connect common identity providers (Google, Facebook, Twitter) to a crypto identity. ORE ID provides an endpoint (/auth) to allow you to trigger a web-hosted user login flow that is branded for your app.
Utilizing some of the most popular Javascript frameworks, we open blockchain development to all kinds of developers and make it easier for developers to learn new blockchain technologies. ReactJS is a Javascript progressive framework for building user interfaces. ORE ID is built on top of an open source JavaScript library called ChainJS.
Steps
Follow these 6 steps to get the ORE ID sample app running on your local machine.
1. Set up your environment
You can clone the sample app repo here .
git clone https://github.com/TeamAikon/ore-id-docs.git
Once you have cloned the repo, navigate to the Algorand example folder under examples/_algorand/react.
cd ore-id-docs/examples/_algorand/react
2. Create an .env file for the sample app
As a react app, the .env file houses the secrets for the config of your app deploy, including things like your App ID and API Key.
A) Find the example .env file named .env.example in the root of the ore-id-docs/examples/_algorand/react directory.
Tip
Use the ls -a command to view .env files in a directory.
Currently, the env.example we have created contains a sample app config where the App ID and API Key are already populated.
B) Duplicate the .env.example file into the same folder and rename it .env.
cp .env.example .env
3. Launch the React app
After creating your .env config file we will use React to launch a sample app in your browser.
From the the same directory, ore-id-docs/examples/_algorand/react, launch the app with:
yarn start
4. Login with OAuth
If everything has gone smoothly up until this point, the sample app should now be deployed on your local machine and will appear in your browser at localhost:3000
Please login by choosing the social OAuth platform you prefer.
That’s all it takes to create an account! ORE ID provides all of the popular social OAuth platforms, email and phone number as login options for your users ensuring a comfortable onboarding path for your end users.
5. Verify your account
Now that you have an account, you can see it on the block explorer.
Copy your chain account name and view it on the block explorer here, https://testnet.algoexplorer.io/.
6. Test signing a transaction
The sample Algorand transaction provided for the signing flow must be updated with current values for last-round. Run the following command in your command line to get the current value and then update the value for the lastRound parameted in the sample transaction, under the composeAlgorandSampleTransaction() function.
curl -X GET
'https://testnet-algorand.api.purestake.io/ps2/v2/transactions/params'
-H 'X-API-Key : *{your purestake.io api key}*'
After you update and re-run your local instance, you will be able to test the Sign with oreid button that will test sending 1 microAlgo from your account to another default test account.
Recap
- You created a new blockchain account for the ORE ID sample application by logging in via your preferred OAuth platform.
- You learned more about how ORE ID works and saw the end user login flow.
- You experienced how easy ORED ID makes it for your users to log into your app.
- If you have questions contact us!