DEV Community: Sani Joshua

How to Integrate Custom Authentication from Your Existing Website Using Flarum API, Flarum-SSO, and JS-Cookie

Sani Joshua — Fri, 14 Feb 2025 08:35:09 +0000

Introduction

Flarum is a lightweight and extensible forum software that allows for seamless integration with external authentication systems. If you have an existing website and want to enable single sign-on (SSO) for your users, you can leverage Flarum’s API, SSO extension, and cookies to streamline authentication.

In this guide, we will walk you through the steps to integrate custom authentication into your Flarum forum using your existing website’s credentials.

Prerequisites

Before we begin, ensure you have the following:

A Flarum instance installed and running.
An existing website with user authentication.
The Flarum SSO extension installed.
Basic knowledge of handling APIs and cookies in JavaScript.

Step 1: Configure Flarum SSO Extension

To enable authentication via your existing website, install the SSO extension in Flarum by running:

composer require maicol07/flarum-ext-sso

After installation, enable the extension from the Flarum admin panel, with the following configuration

Configuration

Signup URL: URL where the user will be redirected when the Signup button is clicked
Login URL: URL where the user will be redirected when the Login button is clicked
Logout URL: URL where the user will be redirected when the Logout button is clicked

For more information see Documentation

Signup url: https://yyour-website.com/signup?action=register
Login url: https://your-website.com/login?redirect_to=forum (The redirect_to=forum part is important as it will redirect your users back to the forum)

Step 2: Generate an API Key in Flarum

API Keys are the primary way for scripts, tools and integrations to interact with Flarum.

Creation

There is currently no UI to manage API Keys, but they can be created manually in the api_keys table of the database.

The following attributes can be filled:
key: Generate a long unique token (recommended: alpha-numerical, 40 characters) and set it here, this will be the token used in the Authorization header.
user_id: Optional. If set, the key can only be used to act as the given user.

Access Tokens

Access Tokens are short-lived tokens that belong to a specific user.

Those tokens are used behind the scenes for cookie sessions. Their use in stateless API requests has the same effect as a regular session. The user last activity will be updated each time the token is used.

Creation

All users are allowed to create access tokens. To create a token, use the /api/token endpoint with the credentials of your user:

POST /api/token HTTP/1.1

{
    "identification": "Toby",
    "password": "pass7word"
}

HTTP/1.1 200 OK

{
    "token": "YACub2KLfe8mfmHPcUKtt6t2SMJOGPXnZbqhc3nX",
    "userId": "1"
}

See Documentation for more information

Store this key securely as it will be used to authenticate API requests.

Step 3: Implement Login Flow on Your Website

Your existing website should handle authentication and then create a session for the user in Flarum. Use the Flarum API to check if the user exists and create one if necessary.

Example: Logging in via API

export const getFlarumToken = async ({
  identification,
  password,
}: {
  identification: string;
  password: string;
}) => {
  try {
    const flarumUser = {
      identification,
      password,
    };

    const res = await fetch("https://your-forum.com/public/api/token", {
      headers: {
        "Content-Type": "application/json",
      },
      method: "POST",
      body: JSON.stringify(flarumUser),
    });
    return await res.json();
  } catch (err) {
    console.log(err, "something went wrong");
  }
};

export const getOrCreateFlarumUser = async ({
  username,
  email,
  password,
}: TCreateFlarumUser) => {
  try {
    const flarumUserOne = await getFlarumToken({
      identification: config.get<string>("flarum.user"),
      password: config.get<string>("flarum.pass"),
    });

    // Generate a Flarum authentication token
    const flarumUser = await getFlarumToken({
      identification: email,
      password: uid,
    });

    if (flarumUser.token) return flarumUser.token;

    const newUser = {
      data: {
        attributes: {
          username,
          email,
          isEmailConfirmed: true,
          password,
        },
      },
    };
    const newUserResponse = await fetch(
      "https://your-forum.com/public/api/users",
      {
        headers: {
          "Content-Type": "application/json",
          Authorization: `Token ${flarumUserOne.token}`,
        },
        method: "POST",
        body: JSON.stringify(newUser),
      }
    );
    await newUserResponse.json();
    const newFlarumUser = await getFlarumToken({
      identification: email,
      password: uid,
    });

    return newFlarumUser.token;
  } catch (err) {
    console.log("somehting went wrong");
  }
};

export const getFlarumUserHandler = async (req: Request, res: Response) => {
  const email = req.params.email
  const password =  req.params.password
  const username = req.params.username

  const flarumUserToken = await getOrCreateFlarumUser({
    email,
    password,
    username: `flarum-${generateBase62String(7)}`,
  });

  res.status(statusCodes.success.code).json({
    success: true,
    message: "User fetched successfully.",
    flarumUserToken,
  });    
}

If the user does not exist in Flarum, create an account via the API before issuing the login token.

Step 5: Maintain User Session with Cookies

To persist login across your website and Flarum, use cookies for authentication. Store the Flarum token in a cookie that applies across subdomains.

import Cookies from 'js-cookie';

// Fetch token from your server then set cookie like this
Cookies.set('flarum_remember', token, { 
  domain: '.yourdomain.com', 
  secure: true, 
  sameSite: 'None' 
});

Ensure that your Flarum forum and main website share the same root domain.

Step 6: Logout Implementation

To log out a user from both platforms, clear the authentication cookies.

function logoutUser() {
    Cookies.remove('flarum_remember', { domain: '.yourdomain.com' });
}

Conclusion

By integrating Flarum’s API, SSO extension, and cookies, you can create a seamless authentication experience for users moving between your website and the forum. This approach ensures a unified login process and improves user experience.

Exploring JavaScript: My Journey with the this Keyword

Sani Joshua — Sat, 31 Aug 2024 07:01:36 +0000

While working, I had the idea of using the this keyword in an object. So I thought, "Why not just do something like this?"

const a = {
  a: 3,
  b: this.a
};

But, of course, that didn't work—it resulted in undefined. So, I turned to ChatGPT for a better solution, and it suggested:

const a = {
  a: 3,
};
a.b = a.a;

Or, another option:

const a = {
  a: 3,
  b: (() => 3)(),
};

I wasn't satisfied with either solution because I really wanted to use the this keyword. I insisted on finding a way, which led to a "this" (pun intended) discussion.

If you want to use this within an object to refer to another property in the same object, you can do it with a getter, like this:

const a = {
  a: 3,
  get b() {
    return this.a;
  },
};

That was neat, but my curiosity kicked in, and I wondered if I could do the same in a function. I asked:

"What about this?"

const a = {
  a: 3,
  b: function() {
    return this.a;
  },
};

const a = {
  a: 3,
  b() {
    return this.a;
  },
};

But this solution required calling b() every time, which I didn’t like. I then thought, maybe a self-calling function would work: So I tried this:

const a = {
  a: 3,
  b: (function() {
    return this.a;
  })()
};

This led to another "this" conversation because using this is such a hot topic.

In this case, the b function is immediately invoked when the object a is being created. However, the value of this inside the function isn't what you'd expect—it refers to the global object (window in browsers, global in Node.js) or is undefined in strict mode. That's why this.a ends up being undefined.

Arrow Functions and this
In JavaScript, the this keyword inside an arrow function doesn't work the same way as in regular functions. Instead, it captures this from the surrounding context when the arrow function is defined.

const obj = {
  value: 10,
  showValue: () =>  {
    console.log(this.value); // `this` refers to the global object (or `undefined` in strict mode)
  }
};

const obj = {
  value: 10,
  showValue () {
    console.log(this.value); // `this` refers to the object `obj`
  }
};

obj.showValue(); // Outputs: 10

IIFE and this
Since the function is invoked immediately and isn't part of the object a when it's invoked, this refers to the global object or is undefined in strict mode.

After gathering all this information, I realized that I had to use a getter to leverage this. But after writing a more complicated version of my code, I started to think about simplifying things. I asked the final question:

"How can I simplify this?"

const c = {
  x: true, // some operation that produces boolean
  y: false, // some other operation
  get a() {
    return this.x && this.y;
  },
};

And it gave me this:

const x = false // some operation that produces boolean;
const y = true // some other operation;
const c = {
  a: x && y
};

This brought me back to where I started. My thought was, that if the variables got longer, I'll end up creating both a long list of variables and a long object.

So we had "this" conversation.

What's wrong with getters?

There’s nothing inherently wrong with using getters. They’re actually quite useful, especially when you want to create a property that’s calculated based on other data. However, in your case, using getters might not be necessary or could introduce subtle issues, depending on how they’re used.

When Getters are Useful:

Lazy Evaluation: They only calculate the value when it’s accessed, which can save computation time.
Encapsulation: They provide a clean interface for accessing calculated properties without exposing the implementation details.

Example

const x = {
  _a: 3,  // Internal property to store the value
  get a() {
    return this._a;
  },
  set a(value) {
    this._a = value;
    // You can also define what should happen when 'a' is set
  },
  get b() {
    return this._a;  // Return the value of 'a'
  },
  set b(value) {
    this._a = value;  // Set 'a' when 'b' is set
  }
};

Potential Issues with Getters:

Performance: If the logic is complex, it could introduce performance overhead because the value is recalculated every time it’s accessed.
Misleading: It might not be obvious that a property involves computation, leading to confusion.
Context (this) Sensitivity: Getters rely on the correct context (this). If the context isn’t what you expect, it could lead to bugs.

When Not to Use Getters:

Static Data: If the data doesn’t change, using getters adds unnecessary complexity.
Complex Computations: For complex computations that are accessed multiple times, it might be better to store the result in a variable to avoid recalculating.

So from my previous example using get, x, and y was not exposed which makes it a good solution if I wanted encapsulation. My concern was mainly about performance, so just for fun, I asked:

"What’s the difference between accessing a variable in memory vs. performing a computation or operation, e.g., a mathematical one, in terms of performance?"

Summary:

Memory Access: Fast and predictable, making it cheap in terms of performance.
Computation: Can range from slightly slower to significantly slower, depending on the complexity. It consumes more CPU resources and can introduce unpredictability in execution time.

I ended up spending 30 minutes on a 3-minute task, but I learned a few new concepts like getters and setters in objects, the scope of this in an IIFE, and the this keyword in various instances, along with a general understanding of recomputation vs. memory access.

Conclusion on this:

Here’s a quick reference for how the this keyword behaves in various scenarios:

Global Context:
- Non-strict mode: this refers to the global object (window in browsers).
- Strict mode: this is undefined.
Object Method: this refers to the object that owns the method.
Constructor Function: this refers to the newly created instance.
Class Method: this refers to the class instance.
Arrow Function: this is lexically bound to the surrounding context.
Event Handler (DOM): this refers to the element that received the event.
Explicit Binding (call, apply, bind): this is explicitly set to the first argument provided.
Inline Event Handler (HTML): this refers to the DOM element that is the target of the event.
Global Arrow Function (non-strict): this refers to the global object.
In an IIFE:
- Non-strict mode: this refers to the global object.
- Strict mode: this is undefined.
Class Static Method: this refers to the class itself.
In setTimeout or setInterval:
- Traditional function: this refers to the global object.
- Arrow function: this is inherited from the surrounding context.
Module Scope (ES6 Modules): this is undefined in module scope.
Proxy Handler: this inside a proxy handler refers to the proxy itself.
With new keyword in Function: this refers to the newly created object.

I understand some of this, and I’ll have to look up the rest from time to time. This article serves as a reference so I don’t have to search all over again.

If you like this kind of article about how I learn, give it a like!

NB: This article was mostly generated with AI.

Safely Handling HTML in React

Sani Joshua — Sat, 15 Jun 2024 20:46:27 +0000

Safely Handling HTML in React: `html-react-parser` vs `dangerouslySetInnerHTML`

When working with React, there are times when you need to render HTML content dynamically. Whether it's content fetched from an API, user-generated content, or from a database. Handling HTML strings safely and efficiently is crucial. This article explores two common methods for rendering HTML in React: using html-react-parser and dangerouslySetInnerHTML, along with the importance of sanitizing HTML using DOMPurify.

Method 1: `html-react-parser`

html-react-parser is a popular library that converts HTML strings into React elements. It offers several advantages, especially in terms of security and control over the HTML content.

Pros:

Element Transformation: It allows for transforming elements during parsing, enabling you to manipulate the DOM structure or attributes as needed.
Ease of Use: The API is straightforward, making it easy to integrate into your project.
Selective Parsing: Provides control over which parts of the HTML to parse and render.

Cons:

Performance Overhead: Parsing and converting HTML strings to React elements can introduce some performance overhead.
Bundle Size: Adding this dependency increases your bundle size, potentially affecting load times.
Complexity: For very simple use cases, using a library might be overkill compared to the straightforward approach of dangerouslySetInnerHTML.

Example Usage:

import React from 'react';
import parse from 'html-react-parser';

const MyComponent = ({ htmlString }) => {
  return <div>{parse(htmlString)}</div>;
};

Method 2: `dangerouslySetInnerHTML`

dangerouslySetInnerHTML is a built-in React feature that allows you to set HTML directly. Despite its name, it can be used safely with proper precautions.

Pros:

Performance: Directly setting the inner HTML can be more performant since it involves fewer processing steps.
Simplicity: For straightforward cases, it is very simple and requires no additional dependencies.

Cons:

Security Risk: It exposes your application to XSS attacks if the HTML content is not properly sanitized.
Lack of Control: Offers less control over the HTML content being rendered.

Example Usage:

const MyComponent = ({ htmlString }) => {
  return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
};

The Importance of DOMPurify

When using dangerouslySetInnerHTML, it is crucial to sanitize the HTML strings to prevent XSS attacks. DOMPurify is a robust library that cleans HTML content by removing or neutralizing potentially dangerous scripts or tags.

Installing DOMPurify:

npm install dompurify

Example Usage with dangerouslySetInnerHTML:

import React from 'react';
import DOMPurify from 'dompurify';

const MyComponent = ({ htmlString }) => {
  const sanitizedHtml = DOMPurify.sanitize(htmlString);
  return <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />;
};

Conclusion

Choosing between html-react-parser and dangerouslySetInnerHTML depends on your specific use case:

Use html-react-parser: If you need safer HTML parsing with transformation capabilities and can afford the performance and bundle size trade-offs.
Use dangerouslySetInnerHTML: If you need a simple and performant way to inject HTML, but ensure you sanitize the HTML using a library like DOMPurify to mitigate security risks.

In most cases, html-react-parser provides a good balance of safety and flexibility. However, for maximum security when directly injecting HTML, always sanitize your input with DOMPurify.

By understanding these methods and their implications, you can make informed decisions on how to handle HTML content safely and efficiently in your React applications.

Fixing Apex Domain Issues for Next.js Sites Hosted on Vercel

Sani Joshua — Sat, 15 Jun 2024 20:40:11 +0000

Fixing Apex Domain Issues for Next.js Sites Hosted on Vercel

If you're hosting Next.js sites on Vercel and using custom domains purchased from Namecheap, you might encounter a common issue where the apex domain (mysite.com) does not load while the www subdomain (www.mysite.com) works perfectly. This guide will walk you through the steps to resolve this issue by correctly setting up your DNS records.

The Issue

When visiting www.mysite.com, your site loads without any problems, but trying to access mysite.com results in the "site can’t be reached". This is usually due to incorrect DNS record configurations for the apex domain.

The Solution

To fix this, you need to update your DNS records in Namecheap to properly point the apex domain to your Vercel-hosted site.

Step-by-Step Guide

Access Namecheap DNS Settings

Log in to your Namecheap account.
Navigate to the "Domain List" section from the left sidebar.
Find the domain you want to configure and click on the "Manage" button.

Update DNS Records

Go to the "Advanced DNS" tab.
Look for existing DNS records related to the domain. You might find an A record pointing to an IP address (e.g., @ -> 76.76.21.21).

Remove Incorrect A Record

If you have an A record for the apex domain (@), remove it. This record typically points to an IP address that might not be suitable for Vercel's configuration.

Add CNAME Record for Apex Domain

Click on "Add New Record".
Select "CNAME Record" from the dropdown menu.
Set the "Host" field to @.
Set the "Value" field to your Vercel subdomain (e.g., your-site-name.vercel.app).
Click the checkmark to save the record.

Example:

   Type: CNAME Record
   Host: @
   Value: your-site-name.vercel.app
   TTL: Automatic

Verify the Changes

DNS changes can take some time to propagate. It might take anywhere from a few minutes to 48 hours for the changes to fully take effect.
To verify, you can use online tools like DNS Checker to see if your apex domain is correctly pointing to Vercel.

Test Your Site

After the DNS changes have propagated, visit both mysite.com and www.mysite.com to ensure both URLs load your site correctly.

Additional Tips

Vercel Domain Configuration: Ensure that you have added both the www and apex versions of your domain in the Vercel dashboard under your project’s settings.
Redirect Non-www to www (or vice versa): You might want to set up a redirect from the non-www version to the www version (or the other way around) to ensure consistent access. This can be done in Vercel's project settings or through additional DNS configurations.

Conclusion

By replacing the A record with a CNAME record pointing to your Vercel subdomain, you can resolve the issue of your apex domain not loading. This ensures that both mysite.com and www.mysite.com work seamlessly.

How to Integrate Cloudinary with TinyMCE for Image Uploads

Sani Joshua — Sat, 15 Jun 2024 15:33:18 +0000

If you're looking to enable image uploads in TinyMCE and store those images in Cloudinary, you're in the right place. This guide will walk you through the steps to integrate Cloudinary with TinyMCE, allowing users to upload images directly from the editor and have them stored in Cloudinary.

Prerequisites

A Cloudinary account. If you don’t have one, sign up here.
A TinyMCE API key. You can get one from the TinyMCE website.

Steps

Set Up Cloudinary

Log in to Cloudinary: Go to the Cloudinary website and log in to your account.
Navigate to Settings: Once logged in, click on the "Settings" tab.
Create an Upload Preset:
- Go to the "Upload" tab.
- Scroll down to the "Upload Presets" section and click "Add upload preset".
- Configure the preset according to your needs (e.g., allowed formats, transformations, folder, etc.).
- Save the preset and note its name.

Set Up TinyMCE

Install TinyMCE in your project (if you haven't already):
```
 npm install @tinymce/tinymce-react
```

Create a component for the TinyMCE editor and integrate the Cloudinary upload functionality:

 import React, { useRef } from 'react';
 import { Editor } from '@tinymce/tinymce-react';

 interface TinyMiceEditorProps {
     editorRef: React.MutableRefObject<any>;
 }

export default function TinyMiceEditor({ editorRef }:TinyMiceEditorProps) {
   const filePickerCallback = (callback, value, meta) => {
     if (meta.filetype === 'image') {
       const input = document.createElement('input');
       input.setAttribute('type', 'file');
       input.setAttribute('accept', 'image/*');

       input.onchange = async function () {
         const file = this.files[0];

         if (file) {
           const formData = new FormData();
           formData.append('file', file);
           formData.append('upload_preset', 'your_upload_preset'); // replace with your upload preset

           try {
             const response = await fetch(
               `https://api.cloudinary.com/v1_1/your_cloud_name/image/upload`, // replace with your cloud name
               {
                 method: 'POST',
                 body: formData,
               }
             );

             if (!response.ok) {
               throw new Error('Network response was not ok');
             }

             const data = await response.json();
             const imageUrl = data.secure_url;

             // Insert the uploaded image URL into TinyMCE
             callback(imageUrl, { title: file.name });
           } catch (error) {
             console.error('Error uploading image to Cloudinary:', error);
           }
         }
       };

       input.click();
     }
   };

   return (
     <Editor
       apiKey={process.env.NEXT_PUBLIC_TINYMCE_API_KEY}
       onInit={(_evt, editor) => (editorRef.current = editor)}
       initialValue=""
       init={{
         height: 500,
         menubar: false,
         plugins: [
           "advlist",
           "autolink",
           "lists",
           "link",
           "image",
           "charmap",
           "preview",
           "anchor",
           "searchreplace",
           "visualblocks",
           "code",
           "fullscreen",
           "insertdatetime",
           "media",
           "table",
           "code",
           "help",
           "wordcount",
         ],
         toolbar:
           "undo redo | blocks | image " +
           "bold italic forecolor | alignleft aligncenter " +
           "alignright alignjustify | bullist numlist outdent indent | " +
           "removeformat | help",
         content_style:
           "body { font-family:Helvetica,Arial,sans-serif; font-size:14px }",
         file_picker_callback: filePickerCallback,
       }}
     />
   );
 };

 export default MyEditor;

Explanation

File Input: The filePickerCallback creates a file input element to allow users to select an image.
Fetch POST Request: The image is uploaded to Cloudinary using the fetch API. Replace your_cloud_name and your_upload_preset with your Cloudinary details.
Image URL: On successful upload, Cloudinary returns the image URL inserted into TinyMCE using the callback.

Important Notes

Security: Using unsigned uploads without an upload preset might expose your Cloudinary account to misuse. Using signed uploads or configuring strict settings on your Cloudinary account is recommended.
Configuration: Upload presets allow you to enforce consistent transformations, naming conventions, and security settings, which can be very beneficial for maintaining order and control over your media assets.

And that's it! You've successfully integrated Cloudinary with TinyMCE to allow image uploads directly from the editor. This setup provides a seamless experience for users to add images to their content, with the images being securely stored and managed in Cloudinary.

DEV Community: Sani Joshua

How to Integrate Custom Authentication from Your Existing Website Using Flarum API, Flarum-SSO, and JS-Cookie

Introduction

Exploring JavaScript: My Journey with the this Keyword

What's wrong with getters?

Safely Handling HTML in React

Safely Handling HTML in React: html-react-parser vs dangerouslySetInnerHTML

Method 1: html-react-parser

Method 2: dangerouslySetInnerHTML

The Importance of DOMPurify

Conclusion

Fixing Apex Domain Issues for Next.js Sites Hosted on Vercel

Fixing Apex Domain Issues for Next.js Sites Hosted on Vercel

The Issue

The Solution

Step-by-Step Guide

Additional Tips

Conclusion

How to Integrate Cloudinary with TinyMCE for Image Uploads

Prerequisites

Steps

Explanation

Important Notes

Safely Handling HTML in React: `html-react-parser` vs `dangerouslySetInnerHTML`

Method 1: `html-react-parser`

Method 2: `dangerouslySetInnerHTML`