Integrating the Materia Auth Plugin in the Materia X2 theme

Basically, the Materia Auth Plugin is developed for Materia X2, but can also be installed for Other (Custom) Blogger themes.

Enabling the Materia Auth Feature

This setting is useful for enabling or disabling the Materia Auth feature. follow these steps:

1. Go to Blogger Dashboard.
2. Select the Theme menu.
3. Click the CUSTOMIZE button.
4. Click Advanced Dropdown, click Feature Options Dropdown.
5. Look for the Slider setting named Materia Auth (Disable | Enable), drag the slider right or left. Here is the explanation:
   • 1px: Disable - Materia Auth Plugin will be disabled.
   • 2px: Enable - Materia Auth Plugin will be enabled.
6. Click the Save button (diskette icon) in the lower right corner.

Adding Materia Auth Dashboard Page

Next, you have to create and publish a static page on Blogger. Static pages on Blogger are pages that have a URL like the following: https://www.domain.com/p/static-page.html.

Example: We have created a static page with the following URL: https://materiax.elcreativeacademy.com/p/dashboard.html. Here, you just need to copy the page name, which is dashboard.html.

Finally, you must enter a page name for the Materia Auth Dashboard. Follow these steps:

1. Go to Blogger Dashboard.
2. Select the Layout menu.
3. Look for the section titled Theme Panel Top.
4. Click the edit button (pencil icon) on the JavaScript Variables (Link List Gadget).
5. A Link List Configuration Popup will appear.
6. You can skip the Title and Number of items to show in list input.
7. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
8. Click the ADD A NEW ITEM button.
9. Here are a few things that can be set:
   
   • In the Site name input, type authPageIndex.
   • In the Site URL input, enter the name of the Materia Auth Dashboard page that you copied earlier. Example: dashboard.html.
   • If both inputs are set, click the SAVE button next to them.
10. If you want to finish the configuration, click the SAVE button at the bottom.

Firebase Configuration

Next, you need to configure Firebase. Follow these steps:

1. Go to Firebase Console.
2. If you want to create a new project, click the Add Project button.
3. A new dialog will appear, please fill in your Project Name, for example: Materia Auth. If so, click the Continue button.
4. A step will appear to enable/disable Google Analytics. Adjust according to your wishes. If so, click the Continue button.
   1. If you have Google Analytics enabled, on the next screen, you need to select a Google Analytics account, then click the Continue button.
5. Wait until the process is complete. Then click the Continue button.
6. On the overview page, click the Web icon.
   
7. A new dialog will appear, fill in the App Nickname input with the name of the application you want. Example: Materia App. Then click the Register App button.
8. Next, you need to copy the Firebase SDK information. Just copy the following code:
   
9. If the code above has been copied. Click the Continue to Console button.

Adding Firebase Configuration to Materia X2

Next, you'll need to add the previously copied Firebase SDK information to Materia X2. Follow these steps:

1. Go to Blogger Dashboard.
2. Select the Layout menu.
3. Look for the section titled Theme Panel Top.
4. Click the edit button (pencil icon) on the JavaScript Variables (Link List Gadget).
5. A Link List Configuration Popup will appear.
6. You can skip the Title and Number of items to show in list input.
7. In the Sorting section, you can choose between Don't sort, Sort Alphabetically and Sort Reverse Alphabetically. Please choose according to your wishes (Optional).
8. Click the ADD A NEW ITEM button.
9. Here are a few things that can be set:
   
   • In the Site name input, type authConfig.
   • In the Site URL input, enter the name of the Firebase SDK information that you copied earlier.
   • If both inputs are set, click the SAVE button next to them.
10. If you want to finish the configuration, click the SAVE button at the bottom.

Enabling Firebase Features

Materia Auth requires two Firebase features, namely Authentication and Firestore Database.

Authentication

You need to enable the Authentication feature. Follow these steps:

1. On the Firebase Dashboard, select the Build > Authentication menu.
   
2. Next, click the Get Started button.
3. The Sign-In Method tab will appear. Click Google and click the Enable toggle.
4. Select Project support email, according to the dropdown menu. If so, click the Save button.
5. Next, select the Settings tab and select Authorized Domain. Then click the Add Domain button.
   
6. Enter your domain, for example: materiax.elcreativeacademy.com.
7. Finally, click the Add button.

Firestore Database

You need to enable the Firestore Database feature. Follow these steps:

1. On the Firebase Dashboard, select the Build > Firestore Database menu.
   
2. Next, click the Create Database button.
3. The new dialog will appear. Just click Next button then Enable button.
4. Wait for the Cloud Firestore Provisioning process to complete.
5. Next, select the Rules tab and paste the Rules code you have received into it. Then click the Publish button.
   

The Last Steps..

Next, you enter the Auth-Token into the Materia X2 configuration. You can request the Token code from the Developer.

Finally, you need to add an admin account via the Firestore Dashboard. For further information please contact the Developer.

At this point, the Materia Auth plugin will be ready to use.