fix: make button login wiuth github

projects/rawkode.academy/cms/package.json

@@ -32,6 +32,8 @@
  "@swc/core": "^1.3.67",
  "@types/express": "^4.17.9",
  "@types/passport-oauth2": "^1.4.12",
+ "@types/react": "^18.2.15",
+ "react": "^18.2.0",
  "copyfiles": "^2.4.1",
  "cross-env": "^7.0.3",
  "nodemon": "^2.0.6",

projects/rawkode.academy/cms/src/components/signinButton.tsx

@@ -0,0 +1,17 @@
+import Button from 'payload/dist/admin/components/elements/Button'
+import React, { useEffect } from 'react'
+
+export const SigninButton: React.FC = () => {
+ useEffect(() => {
+ setTimeout(() => {
+ // window.location.href = '/a'
+ }, 2000)
+ }, [])
+ return (
+ <div style={{ marginBottom: 40 }}>
+ <Button el="anchor" url="/oauth2/authorize">
+ Sign in with GitHub
+ </Button>
+ </div>
+ )
+}

projects/rawkode.academy/cms/src/payload.config.ts

@@ -12,6 +12,7 @@ import { Logo } from "./collections/media";
 import { People } from "./collections/people";
 import { Episodes, Shows } from "./collections/shows";
 import { Technologies } from "./collections/technologies";
+import { SigninButton } from "./components/signinButton";
 
 const allCollections: CollectionConfig[] = [
  People,
@@ -43,7 +44,10 @@ export default buildConfig({
  clientSecret: process.env.OAUTH_CLIENT_SECRET,
  authorizationURL: `${process.env.OAUTH_BASE_URL}/login/oauth/authorize`,
  tokenURL: `${process.env.OAUTH_BASE_URL}/login/oauth/access_token`,
- callbackURL: `${process.env.DNS_NAME}/oauth2/callback`,
+ callbackPath: "/oauth2/callback",
+ components: {
+ Button: SigninButton,
+ },
  scope: "basic",
  mongoUrl: process.env.MONGODB_URI,
  userCollection: {