Skip to content

OAuth Login

Use this extension is used to add login functionality for 3rd party OAuth logins (i.e. Facebook, Google, Twitter, etc).

Prerequisites

Modules

Packages

Installation

  1. Copy optional-extensions/oauth-login to themes/genesis/src/custom-extensions/oauth-login.

  2. Add import {OauthLogin} from 'custom-extensions/oauth-login'; to src/pages/Global.js.

    Alternatively, it is preferred to asynchronously load in the extension to improve page performance. This can be done by adding the following code to the onReady() method in the Global.js file: 

    (async () => {
    if (!document.getElementsByClassName('js-oauth-login')[0] && !document.getElementsByClassName('js-oauth-unlink')[0]) {
        return;
    }

    const {OauthLogin} = await import('custom-extensions/oauth-login');

    new OauthLogin();
})();

    If you intend to have the OAuth login buttons only on specific pages or login forms (not available globally) the extension can also be installed within specific pages. For example in src/pages/LOGN/LOGN.js.

  3. Add the OAUTH_REDIRECT page to theme.js

    • Copy the OAUTH_REDIRECT folder from optional-extensions/oauth-login/themes/genesis/src/pages/ to themes/genesis/src/pages.
    • Add OAUTH_REDIRECT: () => import('pages/OAUTH_REDIRECT/OAUTH_REDIRECT.js') to pageCodeImports in the themes/genesis/src/theme.js file.
  4. Create the following content sections in Theme Component > Content Sections in the Miva admin:
    1. OAuth Login
      • Code: oauth_login
      • Name: OAuth Login
      • Content: Copy the content from optional-extensions/oauth-login/miva-templates/properties/readytheme_contentsection/oauth_login.mvt file into the content section.
      • Ensure the Wrap in a <div> tag option is unchecked
    2. OAuth Linked Accounts
      • Code: oauth_linked
      • Name: OAuth Linked Accounts
      • Content: Copy the content from optional-extensions/oauth-login/miva-templates/properties/readytheme_contentsection/oauth_linked.mvt file into the content section.
      • Ensure the Wrap in a <div> tag option is unchecked
    3. Add the <mvt:item name="readytheme" param="contentsection( 'oauth_login' )" /> tag to any pages or content sections where you want the OAuth login buttons displayed (i.e. LOGN, checkout pages, etc).
    4. Add the <mvt:item name="readytheme" param="contentsection( 'oauth_linked' )" /> tag to any pages or content sections where you want the OAuth link/unlink account buttons displayed (i.e. CEML, ACLN, etc).
  5. Configure the linkPageCode value in the _settings object in themes/genesis/src/custom-extensions/oauth-login/OauthRedirect.js with the Page Code where you just placed the oauth_linked content item in step 4. (default is CEML)
  6. Add the styles to the Global.scss file
    • @import "custom-extensions/oauth-login/index";
  7. Add the following page User Interface > Templates > Page > OAuth Redirect:
    • OAuth Redirect
      • Code: OAUTH_REDIRECT
      • Name: OAuth Redirect
      • Cache Page: Never Cache This Page
      • Templates:
        1. Copy the content from the optional-extensions/oauth-login/miva-templates/oauth_redirect.mvt file to the Template section.
        2. Copy the content from the optional-extensions/oauth-login/miva-templates/oauth_redirect-content.mvt file to the Content section.
    • Items Assign the following items to the page under the Items tab:
      • content
      • global_minibasket
      • hdft
      • head
      • html_profile
      • oauth
      • oauth_providers
      • oauth_tokens
      • prodctgy_meta
      • readytheme
      • ry_toolbelt
      • store
      • urls
    • Update the page URL for the "Link/Unlink" email to match the code for the page where you placed the "unlink" oauth_linked item in step 4 (i.e. &mvte:urls:CEML:secure;).
  8. Move the file for Oauth Email Juice template optional-extensions/oauth-login/juice-email-templates/email_oauth.mvt to src/juice-emails/emails/templates
  9. Create the following Email Templates:
    • Oauth Email
      • Email Template options:
        • Code: OAUTH
        • Name: Oauth Email
        • From: &mvt:store:email;
        • Reply-To: &mvt:store:email;
        • To: Changes to your account
        • Subject: Oauth Email
        • Mime Type: text/html; charset=&mvt:store:charset;
        • Sending: Manual
      • Alternatively you could run the following through Import Data and Settings in XML Provisioning Format
        • <Module code="templateorderemails" feature="fulfill">
    <Email_Add>
        <Code>OAUTH</Code>
        <Name>Oauth Email</Name>
        <From>&mvt:store:email;</From>
        <ReplyTo>&mvt:store:email;</ReplyTo>
        <To>Changes to your account</To>
        <Subject>Oauth Email</Subject>
        <MimeType>text/html; charset=&mvt:store:charset;</MimeType>
    </Email_Add>
</Module>
  10. Run pnpm run build so juice builds the oauth email template.
  11. Paste the contents from miva-templates/templates/email_oauth.mvt
    • Assign the following items to the page:
      • readytheme
      • store
      • urls
  12. Assign the item oauth_providers to all pages referencing your Oauth content Sections (if using globally, assign to all pages).