Add Twitter provider to connect

components/sesyon/koneksyon.js

@@ -20,15 +20,25 @@ import VisibilityOff from '@mui/icons-material/VisibilityOff'
 import MuiAlert from '@mui/material/Alert'
 import LoginIcon from '@mui/icons-material/Login'
 import AppRegistrationRoundedIcon from '@mui/icons-material/AppRegistrationRounded'
+import TwitterIcon from '@mui/icons-material/Twitter'
 import axios from 'axios'
 
 import {validateEmail} from '../../lib/utils/emails'
 import ResetPassword from '../password/reset-password'
 import ResetDialog from '../password/reset-dialog'
+import LoginProvider from './login-provider'
 
 const siteUrl = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3000'
 const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'
 
+const PROVIDERS = [
+  {
+    id: 'twitter',
+    title: 'Twitter',
+    icon: <TwitterIcon />
+  }
+]
+
 function TabPanel(props) {
   const {children, value, index, ...other} = props
 
@@ -232,6 +242,20 @@ function Koneksyon({chimen}) {
           <Tab icon={<AppRegistrationRoundedIcon />} label='S’inscrire' {...a11yProps(1)} />
         </Tabs>
         <TabPanel value={value} index={0}>
+
+          <Box sx={{textAlign: 'center', marginBottom: 3}}>
+            <Typography>Se connecter avec</Typography>
+            {PROVIDERS.map(({id, title, icon}) => (
+              <Box key={id} marginTop={1}>
+                <LoginProvider id={id} title={title} icon={icon} callbackUrl={`${siteUrl}${chimen}`} />
+              </Box>
+            ))}
+          </Box>
+
+          <Box sx={{textAlign: 'center', marginBottom: 3}}>
+            <Typography>ou utilisez votre e-mail pour vous identifier</Typography>
+          </Box>
+
           <FormControl fullWidth autoComplete='off'>
             <InputLabel htmlFor='username'>E-mail</InputLabel>
             <Input

package.json

@@ -69,7 +69,7 @@
         {
           "capIsNewExceptions": [
             "CredentialsProvider",
-            "Google",
+            "TwitterProvider",
             "NextAuth"
           ]
         }

pages/api/auth/[...nextauth].js

@@ -1,5 +1,6 @@
 import NextAuth from 'next-auth'
 import CredentialsProvider from 'next-auth/providers/credentials'
+import TwitterProvider from 'next-auth/providers/twitter'
 import axios from 'axios'
 
 const options = {
@@ -26,6 +27,10 @@ const options = {
           throw new Error(errorMessage)
         }
       }
+    }),
+    TwitterProvider({
+      clientId: process.env.NEXT_PUBLIC_TWITTER_API_KEY,
+      clientSecret: process.env.NEXT_PUBLIC_TWITTER_API_KEY_SECRET
     })
   ],
   secret: process.env.NEXT_PUBLIC_JWT_SECRET,
@@ -35,9 +40,14 @@ const options = {
   callbacks: {
     async jwt({token, user, account}) {
       if (user) {
-        const response = await fetch(
-          `${process.env.NEXT_PUBLIC_API_URL}/auth/${account.provider}/callback?access_token=${account?.accessToken}`
-        )
+        let url = `${process.env.NEXT_PUBLIC_API_URL}/auth/${account.provider}/callback?access_token=${account?.accessToken}`
+
+        if (account.provider === 'twitter') {
+          url = `${process.env.NEXT_PUBLIC_API_URL}/auth/${account.provider}/callback?access_token=${account?.oauth_token}&access_secret=${account?.oauth_token_secret}`
+        }
+
+        const response = await fetch(url)
+
         const data = await response.json()
         token.id = data.id || user.id
         token.jwt = data.jwt || user.jwt