Developers
      Back to home
      1. AIKON - Help Center
      2. Developers

      How to Create Your First ORE ID Application

      Creating your test app is simple using our sample app. Here you will learn to create an ORE ID app and configure the sample app to run your test app, allowing you to test logins and transaction signing on the chain.

      Overview

      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!


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

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



      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

      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. 

      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 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. 



      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.

      OREID-GitHub-diagram-01

      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.

      Screen_Shot_2020-09-25_at_5.51.48_PM

       

      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!

      Screen_Shot_2020-09-25_at_5.52.10_PM

      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](oreid.io).

       

      If you have questions contact us at support@aikon.com!