{"id":94,"date":"2019-09-25T06:35:22","date_gmt":"2019-09-25T06:35:22","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/reactify\/?page_id=94"},"modified":"2019-10-15T08:58:43","modified_gmt":"2019-10-15T08:58:43","slug":"authentication","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/reactify\/authentication\/","title":{"rendered":"Authentication"},"content":{"rendered":"\n

Here is step by step instructions to use both type of authentication in your template.<\/p>\n\n\n\n

Authentication With Firebase<\/h4>\n\n\n\n

To add Firebase to your app, you’ll need a Firebase project, Firebase SDK and a short snippet of initialisation code that has a few details about your project.<\/p>\n\n\n\n

  1. Create a Firebase project in the Firebase console<\/a>, if you don’t already have one.
    1. If you already have an existing Google project associated with your app, click Import Google Project. Otherwise, click Create New Project.<\/li>
    2. If you already have apps in your project, click Add Another App from the project overview page.<\/li><\/ol><\/li>
    3. Click Add Firebase to your web app.<\/li>
    4. Copy the initialisation code snippet, we will use this code in the next step.<\/li>
    5. Open the file src->firebase->index.js<\/code> and search for the const config<\/code> & paste the code inside it:<\/li><\/ol>\n\n\n\n
      \"\"
      Firebase Initialisation <\/figcaption><\/figure><\/div>\n\n\n\n

      Removing Firebase Authentication<\/a><\/h4>\n\n\n\n

      If you want to remove the firebase authentication from your existing template then please follow this link Completely Remove Firebase From Template<\/a> and follow the steps given.<\/p>\n\n\n\n

      Authentication With Auth0-js<\/a><\/h4>\n\n\n\n

      Reactify comes with Auth0 authentication. You can easily authorise user in your app. Here is step by step instructions to use auth0 in your app.<\/p>\n\n\n\n

      \"\"
      Auth0 SignIn Preview <\/figcaption><\/figure><\/div>\n\n\n\n
      Configure Callback URLs<\/strong><\/h5>\n\n\n\n

      A callback URL is a URL in your application where Auth0 redirects the user after they have authenticated.<\/p>\n\n\n\n

      You need to whitelist the callback URL for your app in the Allowed Callback URLs field in your Application Settings. If you do not set any callback URL, your users will see a mismatch error when they log in.<\/p>\n\n\n\n

      Open auth0-variables.js<\/code> to configure callback url under the src->Auth<\/code> directory. You also need to update the clientId<\/code> & domain<\/code> according to your account’s configuration.
      <\/p>\n\n\n\n

      \"\"
      Auth0.js Config <\/figcaption><\/figure><\/div>\n\n\n\n

      You also need to add callback url in auth0 application settings. <\/p>\n\n\n\n

      \"\"
      Auth0 Application Settings<\/figcaption><\/figure><\/div>\n\n\n\n

      To get more information about Auth0 check the official document<\/a>.<\/p>\n\n\n\n

      Removing Auth0 Authentication<\/a><\/h4>\n\n\n\n

      Open the src->container->SigninFirebase.js<\/code> file and search for the code session-inner-wrapper<\/code> and comment the code given below:SigninFirebase.js<\/p>\n\n\n\n

      {\/* <FormGroup className=\"mb-15\">
             <Button
                    variant=\"contained\"
                    className=\"btn-info btn-block text-white w-100\"
                    size=\"large\"
                    onClick={() => this.loginAuth0()}
               >
               Sign In With Auth0
              <\/Button>
      <\/FormGroup> *\/} <\/pre>\n\n\n\n
      Make sure you only commented out the Sign In With Auth0<\/strong><\/em> Button only not the other ones.<\/p><\/blockquote>\n
      \n    
      \n    \n                        <\/i>\n                    <\/a>\n    1    <\/span>\n<\/div>
      \n    \n                        <\/i>\n                    <\/a>\n    <\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
      Here is step by step instructions to use both type of authentication in your template. Authentication With Firebase To add Firebase to your app, you’ll need a Firebase project, Firebase SDK and a short snippet of initialisation code that has a few details about your project. Create a Firebase project in the Firebase console, if […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":11,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/94"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/comments?post=94"}],"version-history":[{"count":8,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/94\/revisions"}],"predecessor-version":[{"id":684,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/94\/revisions\/684"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/media?parent=94"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}