Allow Passing Functions for signin and signup Props in CommentSection

[vishal590]

Currently, I'm using the CommentSection component in a project that utilizes NextAuth for authentication. Users are taken to the Discord sign-in button instead of seeing the Discord auth window directly

Overview: I would like to propose an enhancement to the CommentSection component in the react-comments-section library. Currently, the signin and signup props only accept string values, which limits the functionality for developers who may want to pass functions for custom login and signup handling.

Current Behavior: As it stands, when using the logIn prop in the CommentSection, the signin and signup attributes can only accept string URLs. This can be restrictive for applications that utilize authentication frameworks like NextAuth, where it might be more beneficial to execute a login function directly.

Proposed Change: I suggest modifying the CommentSection component to allow the signin and signup props to accept both string URLs and function callbacks. This would provide developers with greater flexibility in handling authentication.

import React from 'react'
import { CommentSection } from 'react-comments-section'
import 'react-comments-section/dist/index.css'
import { signIn, signOut, useSession } from "next-auth/react";

const DefaultComment = () => {
  const { data: session, status } = useSession();

  const data = [
    {
      userId: '01a',
      comId: '012',
      fullName: 'Riya Negi',
      avatarUrl: 'https://ui-avatars.com/api/name=Riya&background=random',
      userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
      text: 'Hey, Loved your blog! ',
      replies: [
        {
          userId: '02a',
          comId: '013',
          userProfile: 'https://www.linkedin.com/in/riya-negi-8879631a9/',
          fullName: 'Adam Scott',
          avatarUrl: 'https://ui-avatars.com/api/name=Adam&background=random',
          text: 'Thanks! It took me 1 month to finish this project but I am glad it helped out someone!🥰'
        },
      ]
    },
   
  ]
  return (
    <div style={{ width: '100%' }}>
      <CommentSection
        currentUser={session?.user.id ? {
          currentUserId: '01a',
          currentUserImg:
            'https://ui-avatars.com/api/name=Riya&background=random',
          currentUserProfile:
            'https://www.linkedin.com/in/riya-negi-8879631a9/',
          currentUserFullName: 'Riya Negi'
        }: null}
        logIn={{
          loginLink: 'http://localhost:3000/api/auth/callback/discord',
          signupLink: 'http://localhost:3000/api/auth/callback/discord'
        }}
        />
    </div>
  )
}

export default DefaultComment

Example of Desired Functionality

<CommentSection
  logIn={{
    loginLink: signIn, // Now accepts a function
    signupLink: handleSignup // Now accepts a function
  }}
/>