Set up your Twitter App

• Create a new application in the Twitter Developer Portal (opens in a new tab).
• Navigate to your project tab in the sidebar, and navigate to the Keys and Tokens tab at the top of the page.

• In the Consumer Keys field click the Regenerate button to obtain the Client ID and Client secret.

Set up Firebase Console

• Create a new project in the Firebase Console (opens in a new tab).
• Add a web app to the project.

• Go to project settings and obtain the Firebase config details. Add these to the .env file of the next.js project.

Add Twitter authentication to the Firebase project

• Go to the Authentication tab and navigate to the Sign-in Method section. Select Twitter as the sign-in provider.

• Add the obtained Client ID as the API key and the Client Secret as the API secret when creating the Twitter app. Then, obtain the Callback URL.

• Add the obtained Callback URL as the “Redirect URL” in the Twitter App.

  • Navigate to the app created in the Twitter Developer portal.

  • Navigate to the “user authentication setup”.

    

  • In the “App permission” section give only “Read” access.

  • Then Enable “Request email from users”.

  • Select “Web app” as the type of app.

  • In the “App Info” section as the “Callback URI / Redirect URL” add the obtained Callback URL from the firebase.

  • Add your website URL in the “Website URL” field.

Obtain a JWT token

• Navigate to “twitter-login”.

  cd twitter-login\next-js

• Run the project.

  yarn dev

• Click the Sign in with Twitter Button to obtain the JWT token

  • Click the Sign in with Twitter Button
  • Login with Twitter
  • Open the developer-tools => console, to get the JWT token

  

  Note

  Here you will not be redirected to the homepage of the application since you have not configured the Kaiju Developer Portal (opens in a new tab). Please ignore any errors at this stage.If you do not get the JWT token please clear the Cookies in http:localhost:3000 at Developer-Tools => Application => Cookies by right-clicking on the http://localhost:3000 (opens in a new tab).

Set up your Kaiju Developer Portal

• Sign in to the Kaiju Developer Portal (opens in a new tab).
• After successfully logging in create a new project.

• Fill out the fields and click the "Create Project" button.

• Navigate to the 'Settings' tab in the sidebar and obtain the Access Key.

• Click on the “Custom Authentication” tab at the top, then click the “New Verifier” button to set up a new custom verifier.

  • Enter the desired name for the “Verifier identifier” (e.g.: twitter-verifier).
  • Choose "Custom Providers" as the login provider.
  • Paste the given URL as the JWKs endpoint. https://www.googleapis.com/service_accounts/v1/jwk/securetoken@system.gserviceaccount.com (opens in a new tab)
  • Paste the JWT token obtained from the developer console.
  • Click the "Create verifier" button to obtain the verifier ID.

  

  

Run the project

• Run the project.

  yarn dev

• Login with Twitter, and you will navigate to the home page. You can see your wallet details and can do a transaction from there.

Add More Social Providers

• Add social providers like (Google, Apple, Github, Game Center, Microsoft, Twitter, Yahoo and Email) providers to the Firebase.

• Update the code at src/app/login/page.tsx to use the respective provider.