Tutorials
No Results
Tutorial

Beginner · 15 minutes or less

Create Your First ORE ID Application

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. ORE ID is built on top of an open source JavaScript library called ChainJS. ReactJS is a JavaScript progressive framework for building user interfaces.

Requirements

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.

The goal of this tutorial is to configure oreid-js for your very own “Hello World” app. You should complete the “How to run the ORE ID Sample App”” tutorial before setting up your test app.

Steps

1. Create an app on oreid.io

A) First, login to ORE ID and create a developer app here.
B) You will have the option to upload a logo if you have one ready, but don’t worry if you don’t!

EditorImages/2020/09/11 00:35/staging.oreid.io_authcallback_accountore1r4hfuhs3idTokeneyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6Ik16VTFOa0V5TWpBMU1ESkNNekZDTlVJMU9VUkJOa00zUmpnM01FUXlSa1E0UkVGRVJrUkVSQSJ9.eyJodHRwczovL29yZWlkLmFpa29uLmNvbS9h_7rQ4PLT.png

C) Next, select which social logins you want to allow your users to Auth with.

EditorImages/2020/09/11 02:19/staging.oreid.io_authcallback_accountore1r4hfuhs3idTokeneyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6Ik16VTFOa0V5TWpBMU1ESkNNekZDTlVJMU9VUkJOa00zUmpnM01FUXlSa1E0UkVGRVJrUkVSQSJ9.eyJodHRwczovL29yZWlkLmFpa29uLmNvbS9h_qOjCTs1.png

D) Lastly, you will see that ORE ID supports various chains including Ethereum and EOS, but today we’re here for Algorand.

EditorImages/2020/09/11 02:20/staging.oreid.io_authcallback_accountore1r4hfuhs3idTokeneyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6Ik16VTFOa0V5TWpBMU1ESkNNekZDTlVJMU9VUkJOa00zUmpnM01FUXlSa1E0UkVGRVJrUkVSQSJ9.eyJodHRwczovL29yZWlkLmFpa29uLmNvbS9h_aihayqt.png

2. Setup your environment

Since you already have completed the “How to run the ORE ID Sample App” tutorial, you should already have the sample application files on your machine. If you need to download the files again you can clone the repository.

git clone https://github.com/TeamAikon/ore-id-docs.git

Info

If you haven’t already, follow the instructions for “How to run the ORE ID Sample App” tutorial before completing this one.

After downloading the files, navigate to the react folder in the directory

cd ore-id-docs/examples/_algorand/react

3. Create an .env file for your test 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.

Tip

Use the ls -a command to view .env files in a directory.

Currently, the env.example we have created contains Sample App config— the App ID and API Key are already populated.

B) Duplicate the .env.example file into the same folder and rename it .env.

Tip

There is more than one way to duplicate the .env.example file. You can either 1. Create a copy of the file then rename the new file .env or 2. Create a new file, name the new file .env then populate the file with the contents of the .env.example file.

C) Navigate to the new .env file you just created

D) Replace example App ID and API Key with unique keys generated for your app that you can find on your ORE ID dashboard.

EditorImages/2020/09/18 14:41/oreid.io_developer_dashboardLaptop_with_HiDPI_screen.png

4. Launch the React App

After changing your config files we will use react to launch a sample app in your browser. Launch the app with

yarn start

5. Login with OAuth

The app should appear in your browser on localhost:3000
Please login by choosing the social OAuth platform you prefer.
EditorImages/2020/09/04 23:18/OREID-GitHub-diagram-01.png
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.

6. View your user account in the dashboard

As you just found out, your app dashboard contains your unique API Key and AppID. From here you can also view your user’s stats and info in the Users tab.

EditorImages/2020/09/26 00:53/Screen_Shot_2020-09-25_at_5.51.48_PM.png

7. Update your app settings

You can also use your dashboard to set up your funding wallet, change how your app looks, update your callback URLs, configure whitelist actions, plus more!

EditorImages/2020/09/26 00:53/Screen_Shot_2020-09-25_at_5.52.10_PM.png

Here the brand color will be the color for your Buttons and the background color will update the background of your user’s Auth and Sign Transaction screens in ORE ID.

Adding callback URLs will also be necessary as you further test your hosted app integration. You can add additional callback URLs in the form field as a comma separated list.

Recap

  • You registered your own ORE ID test application.
  • You updated the React sample app and logged in as your first user!
  • You viewed your first users activity on your apps ORE ID dashboard.
  • You experienced how easy ORED ID makes it for your users to log into your app.

Your test app is up and running you can always return to your dashboard to view user info, customizations, and learn more about ORE ID at oreid.io.

If you have questions contact us!

JavaScript

algorand

Aikon

ORE ID

October 23, 2020