import React, { useState, useEffect } from 'react' import { graphql } from 'gatsby' import Img from 'gatsby-image' import styled from '@emotion/styled' import Layout from '../components/layout' import SEO from '../components/seo' type User = { id: string username: string // alert customization https://dev.streamlabs.com/v1.0/reference#alerts image_href: string sound_href: string message: string user_message: string duration: string special_text_color: string } const Wrapper = styled.div` width: 800px; max-width: 100%; padding: 3em 15px; margin: 0 auto; ` const Data = styled.span` display: inline-block; background: rgba(0, 0, 0, 0.1); padding: 3px 8px; ` const OauthRedirectPage = ({ location }: { location: Location }) => { const [user, setUser] = useState(undefined) const [githubUsername, setGithubUsername] = useState('') const token = location.search.replace('?token=', '') useEffect(() => { // load the user fetch(`${process.env.GATSBY_BASE_API}/me`, { headers: { Authorization: `Bearer ${token}` }, }) .then(res => res.json()) .then(res => setUser(res)) .catch(console.error.bind(console)) }, []) if (!user) { return (
Loading...
) } return (

Nearly there!

One last step: add a GitHub webhook. Sounds complicated? It's not! Let's walk you through it.
  1. What's your GitHub username?{' '} setGithubUsername(e.target.value)} />
  2. Head over{' '} {`https://github.com/sponsors/${githubUsername}/dashboard/webhooks/new`}
  3. Fill the form with the following information:
    • Payload URL:{' '} {`${process.env.GATSBY_BASE_API}/webhook/github/${user.id}`}
    • Content Type: application/json
    • Secret: {token}
  4. Done! When someone sponsors you on GitHub, you will now receive an alert on streamlabs.
) } export default OauthRedirectPage