Still Not Logged In After Signing In With Github

[myasul-learn]

I've implemented utterances in my website and got it to render but whenever I click Sign in with Github and authorize in Github it seems that utterances does not recognize the authorization that happened and still displays Signin with Github.

Things I've tried to get it working:

• I used a different account
• Opening it in incognito
• Clearing the browsers cache

Here's how I implemented it. Please advise how can I solve the issue 😅 🙏

const createUtterancesScriptTag = () => {
    const scriptElement = document.createElement('script')

    scriptElement.async = true
    scriptElement.src = 'https://utteranc.es/client.js'
    scriptElement.setAttribute('repo', WEBSITE_REPO)
    scriptElement.setAttribute('issue-term', 'pathname')
    scriptElement.setAttribute('label', 'comments')
    scriptElement.setAttribute('theme', 'github-light')
    scriptElement.setAttribute('id', 'utterances')
    scriptElement.setAttribute('crossorigin', 'anonymous')

    return scriptElement
}

export const Comments = () => {
    const [isLoaded, setIsLoaded] = useState<boolean>(false)
    const commentBox = useRef<HTMLDivElement>(null)

    useEffect(() => {
        if (commentBox?.current) {
            const scriptElement = createUtterancesScriptTag()

            scriptElement.addEventListener('load', () => {
                const iframe = document.querySelector<HTMLIFrameElement>('.utterances-frame')

                if (iframe) iframe.onload = () => setIsLoaded(true)
            })

            commentBox.current.appendChild(scriptElement)
        } else {
            console.error('Failed to add utterances comments.')
        }
    }, [])

    return (
        <section className='comments'>
            <Delimiter />
            <H3>Comments</H3>
            {!isLoaded && <CommentSkeleton />}
            <CommentThreadContainer ref={commentBox} />
        </section>
    )
}

[myasul]

After a few days of debugging, I fixed the issue!

I used the utterance codebase locally and found out that the /token endpoint is not being called. I checked and the reason it's not being called is that the pageAttributes.session is empty.

Based on my debugging, the session could be empty if there was an error during the login and callback /utterances being empty or utterance-session is deleted from local storage.

After a few going back in forth in the network tab, I noticed that gatsby is adding a trailing slash to the callback route, which interferes with the saving of the session.

Sorry for the long story, but I fixed the issue by adding trailingSlash: "never to gatsby-config.js. This has recently been added to v4.7. Hopefully this would help anyone that would get stuck like me!

[myasul]

My long debugging session might have been prevented if there are additional logging statements that would point me in the right direction or informed me of what was happening. @jdanyow I'm willing to add a PR to improve logging statements in this area if you agree with my idea. Let me know your thoughts!