Update add-oauth2-provider.md

Co-authored-by: Christy Jacob <christyjacob4@gmail.com>

CHANGES.md

@@ -1,5 +1,6 @@
 - Fix invited account verified status [#4776](https://github.com/appwrite/appwrite/pull/4776)
 - Get default region from environment on project create [#4780](https://github.com/appwrite/appwrite/pull/4780)
+- Update add a new OAuth provider tutorial [#4865](https://github.com/appwrite/appwrite/pull/4865)
 
 # Version 1.1.2
 ## Changes

docs/tutorials/add-oauth2-provider.md

@@ -47,11 +47,7 @@ Make sure to fill in all data needed and that your provider array key name:
 
 > Please make sure to keep the list of providers in `providers.php` in the alphabetical order A-Z.
 
-### 2.2 Add Provider Logo
-
-Add a logo image to your new provider in this path: `public/images/users`. Your logo should be a png 100×100px file with the name of your provider (all lowercase). Please make sure to leave about 30px padding around the logo to be consistent with other logos.
-
-### 2.3 Add Provider Class
+### 2.2 Add Provider Class
 
 Once you have finished setting up all the metadata for the new provider, you need to start coding.
 
@@ -173,9 +169,48 @@ class [PROVIDER NAME] extends OAuth2
 
 Please mention in your documentation what resources or API docs you used to implement the provider's OAuth2 protocol.
 
-## 3. Test your provider
+## 3. Add provider to console
 
-After you finished adding your new provider to Appwrite, you should be able to see it in your Appwrite console. Navigate to 'Project > Users > Providers' and check your new provider's settings form.
+Start by creating a new branch from `appwrite/console:master`and commit your changes there. 
+
+```
+git checkout -b [name_of_your_new_branch]
+```
+### 3.1 Add provider logo
+
+To add the logo for the provider you are implementing, you will need to create a separate pull request in [`appwrite/console`](https://github.com/appwrite/console) repository.
+
+Appwrite requires 4 copies of the logo, 2 in color and 2 in grayscale, all in SVG format in the following locations.
+
+```bash
+ 
+static/icons/dark/color/XXX.svg
+ 
+static/icons/dark/grayscale/XXX.svg
+
+static/icons/light/color/XXX.svg
+
+static/icons/light/grayscale/XXX.svg
+
+```
+> Where `XXX` is the name of the provider in `lowercase`.
+
+### 3.2 Add provider documentation
+
+Make sure you update the documentation url for the implemented provider in `oauth-providers.ts` located in the [`src/lib/stores/oauth-providers.ts`](https://github.com/appwrite/console/blob/main/src/lib/stores/oauth-providers.ts) in the [`appwrite/console`](https://github.com/appwrite/console) repository.
+
+## 4. Test your provider
+
+To test your provider within appwrite make sure you make the changes required for the console in the `console` git submodule present at [`/app/console`](https://github.com/appwrite/appwrite/tree/master/app) for testing purposes. 
+
+Update the branch for the console in the [.gitmodules]( https://github.com/appwrite/appwrite/blob/master/.gitmodules#L4) folder
+and then run ```git submodule update --init``` from the root of the project.
+
+Following which you will need to `cd` into `app/console` and run `git pull origin <branch-name>`.
+
+Now we are ready to test our provider. To start your appwrite instance run `docker-compose up -d`.
+
+Navigate to **Auth > Setting > OAuth2 Providers** in your appwrite instance to find the newly added provider and test it out.
 
 > To start Appwrite console from the source code, you can simply run `docker compose up -d'.
 
@@ -185,11 +220,11 @@ You can test your OAuth2 provider by trying to login using the [OAuth2 method](h
 
 Pass your new adapter name as the provider parameter. If login is successful, you will be redirected to your success URL parameter. Otherwise, you will be redirected to your failure URL.
 
-If everything goes well, raise a pull request and be ready to respond to any feedback which can arise during our code review.
+If everything goes well, raise both the pull requests and be ready to respond to any feedback which can arise during our code review.
 
-## 4. Raise a pull request
+## 5. Raise a pull request
 
-First of all, commit the changes with the message `Added XXX OAuth2 Provider` and push it. This will publish a new branch to your forked version of Appwrite. If you visit it at `github.com/YOUR_USERNAME/appwrite`, you will see a new alert saying you are ready to submit a pull request. Follow the steps GitHub provides, and at the end, you will have your pull request submitted.
+First of all, commit the changes with the message `Added XXX OAuth2 Provider` and push it. This will publish a new branch to your forked version of Appwrite and the Console. If you visit it at `github.com/YOUR_USERNAME/appwrite`, `github.com/YOUR_USERNAME/appwrite/console` you will see a new alert saying you are ready to submit a pull request. Follow the steps GitHub provides, and at the end, you will have your pull request submitted.
 
 ## 🤕 Stuck ?
 
@@ -197,30 +232,15 @@ If you need any help with the contribution, feel free to head over to [our Disco
 
 ## 😉 Need more freedom
 
-If your OAuth provider requires special configuration apart from `clientId` and `clientSecret` you can create a custom form. Currently this is being realized through putting all custom fields as JSON into the `clientSecret` field to keep the project API stable. You can implement your custom form following these steps:
-
-1. Add your custom form in `app/views/console/users/oauth/[PROVIDER].phtml`. Below is a template you can use. Add the filename to `app/config/providers.php`.
-
-```php
-<?php
-$provider = $this->getParam('provider', '');
-?>
-<label for="oauth2<?php echo $this->escape(ucfirst($provider)); ?>Appid">Application (Client) ID<span class="tooltip" data-tooltip="Provided by AzureAD"><i class="icon-info-circled"></i></span></label>
-<input name="appId" id="oauth2<?php echo $this->escape(ucfirst($provider)); ?>Appid" type="text" autocomplete="off" data-ls-bind="{{console-project.provider<?php echo $this->escape(ucfirst($provider)); ?>Appid}}" placeholder="Application ID" />
-<?php /*Hidden input for the final secret. Gets filled with a JSON via JS. */ ?>
-<input name="secret" data-forms-oauth-custom="<?php echo $this->escape(ucfirst($provider)); ?>" id="oauth2<?php echo $this->escape(ucfirst($provider)); ?>Secret" type="hidden" autocomplete="off" data-ls-bind="{{console-project.provider<?php echo $this->escape(ucfirst($provider)); ?>Secret}}" />
-<!-- [Your custom form inputs go here] -->
-```
-
-2. Add the config for creating the JSON in `public/scripts/views/forms/oauth-custom.js` using this template
+If your OAuth provider requires special configuration apart from `AppId` and `AppSecret` you can create a custom form. You can implement your custom form by adding a custom modal at [src/routes/console/project-%5Bproject%5D/auth](https://github.com/appwrite/console/tree/main/src/routes/console/project-%5Bproject%5D/auth) for your provider and by updating the `oauth-providers.ts` as below.
 
 ```js
-{
-    "[Provider]":{
-        "[JSON property name 1]":"[html element Id 1]",
-        "[JSON property name 2]":"[html element Id 2]"
-    }
-}
-```
+import Microsoft from '../../routes/console/project-[project]/auth/microsoftOAuth.svelte';
 
-3. In your provider class `src/Appwrite/Auth/OAuth2/[Provider].php` add logic to decode the JSON using the same property names.
+...
+
+  case 'microsoft':
+      docs = 'https://developer.microsoft.com/en-us/';
+      component = Microsoft;
+      break;
+```