This project integrate Web3Auth with Microsoft OAuth for authentication. Web3Auth is a decentralized authentication protocol that allows users to sign in to applications using their Ethereum wallets. In this demo, Microsoft OAuth is used to authenticate users, and Web3Auth is employed to provide Ethereum private key access and public address.
Follow these steps to set up and run the project:
git clone https://github.com/rtomas/microsoft-oauth-for-web3auth.git
cd microsoft-oauth-for-web3auth
npm install
3. Configure the verifier in the Web3Auth Dashboard
Choose a name an use it for the ENV Configuration. Then select in Login Provider as "Custom Provider" and configure the other information as you can see in the image.
![image](https://private-user-images.githubusercontent.com/944960/302052865-fc6c5a10-2d3d-4b58-bbdb-1b01ba1e492b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1OTk0NTksIm5iZiI6MTcyNTU5OTE1OSwicGF0aCI6Ii85NDQ5NjAvMzAyMDUyODY1LWZjNmM1YTEwLTJkM2QtNGI1OC1iYmRiLTFiMDFiYTFlNDkyYi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTA2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwNlQwNTA1NTlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xNzYxN2VkNDBkZTZjNzg3NGFmYTlhYTUzMzNhM2VmNGU1MzhmY2Y3NWNkYWQ2ZTU3OTZlNzMwMmRiZjhiMGE3JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.S72oR__peGvplWYJz7JQm5TbahLNkgI2L9dej2-3YcU)
Upload the jwks.json to a server. In my example was uploaded to github.
You'll need the Application (client) ID and the Directory (tenant) ID. Then you can add a redirect URI (in our example is http://localhost:5005/ms/callback)
![image](https://private-user-images.githubusercontent.com/944960/302053258-25803c18-02a5-488b-85e8-67b948d72799.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjU1OTk0NTksIm5iZiI6MTcyNTU5OTE1OSwicGF0aCI6Ii85NDQ5NjAvMzAyMDUzMjU4LTI1ODAzYzE4LTAyYTUtNDg4Yi04NWU4LTY3Yjk0OGQ3Mjc5OS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwOTA2JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDkwNlQwNTA1NTlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1iZDUwZGRhZjVlYmQ3NjlkYTBkOTFlMTJjYmFlNTY5NWFiOWQ5MDYxMmE1ODY4NGQ0Y2QyNmNlMzJhZTk1YmJlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.0wjiEwE3CVs3FKVLNqlP6SSTaQVWzl1hYwkqMjVXOss)
Finally in "Certificates & secrets" -> Client Secret -> New client secret and copy the value to the .ENV
Follow the instructions from this link: https://web3auth.io/docs/auth-provider-setup/byo-jwt-providers#how-to-convert-pem-to-jwks
AZURE_CLIENT_ID=## create one in https://entra.microsoft.com/##
AZURE_CLIENT_SECRET=## create one in https://entra.microsoft.com/##
AZURE_TENANT_ID=## create one in https://entra.microsoft.com/##
AZURE_CODE_CHALLENGE=##create pair with CODE_VERIFIER in https://tonyxu-io.github.io/pkce-generator/##
AZURE_CODE_VERIFIER=##create pair with CODE_CHALLENGE in https://tonyxu-io.github.io/pkce-generator/##
PRIVATE_KEY_FILE_NAME=privateKey.pem
JWKS_FILE_NAME=jwks.json
npm run dev
Open your browser and navigate to http://localhost:5005/ms/login to initiate the Microsoft OAuth flow.
When integrating Web3Auth with Microsoft Login the flow looks something like this: