+Tabs are Teams-aware webpages embedded in Microsoft Teams and a good way to begin developing for Teams. You can add them as part of a channel inside a team, group chat, or personal app for an individual user.

+In this tutorial, you'll learn about a basic Teams tab app in one of the following ways:

+* **Step-by-step guide**: Allows you to set up your development environment and create a Teams app from start.

+Before you create your codespace, ensure that you have the following prerequisites:

+* A GitHub account to create your codespace instance

+* A [Microsoft 365 account](https://developer.microsoft.com/microsoft-365/dev-program) with sideloading permission

+>

+> [GitHub Codespaces](https://github.com/features/codespaces) offers a free plan with a fixed amount of usage per month. If you need to free up more space, go to [github.com/codespaces](https://github.com/codespaces) and delete the codespace that you no longer need.

+To create a Teams tab app with GitHub Codespaces, follow these steps:

+ You might be asked to sign in to GitHub account if you haven't already.

+ :::image type="content" source="../assets/images/get-started/codespace.png" alt-text="Screenshot shows you the GitHub page to create a codespace for tab.":::

+ :::image type="content" source="../assets/images/get-started/building-codespace.png" alt-text="Screenshot shows you the codespace building your tab.":::

+ Teams Toolkit prepares the tab app project for you and opens it in VS Code in the browser. The Teams Toolkit icon appears in the activity bar of VS Code.

+ > When you build your app, GitHub Codespaces loads it to the Teams client in a new tab. If your browser blocks pop-up tabs or windows, you'll need to allow pop-ups for your app to open.

+ GitHub Codespaces builds your tab app, loads it to Teams client, and opens it in a separate browser tab.

+If you want to learn how to start a project with Teams Toolkit from the beginning, you'll need to set up your development environment. Select the following button to start building your basic tab app.

+If a bot is what you're interested in, select the following:

+If you want to build a message extension app, select the following:

+* **Step-by-step guide**: Allows you to set up your development environment and build a Teams app from start.

+Before you create your codespace, ensure that you have the following prerequisites:

+* A GitHub account to create your codespace instance

+* A [Microsoft 365 account](https://developer.microsoft.com/microsoft-365/dev-program) with sideloading permission

+> [GitHub Codespaces](https://github.com/features/codespaces) offers free plan up to a fixed amount of usage per month. If you need to free up more space, go to [github.com/codespaces](https://github.com/codespaces) and delete the codespaces that you no longer need.

+To create a search-based message extension app with GitHub Codespaces, follow these steps:

+ You might be asked to sign in to GitHub account if you haven't already.

+ :::image type="content" source="../assets/images/get-started/codespace.png" alt-text="Screenshot shows you the GitHub page to create a codespace for message extension.":::

+ Teams Toolkit prepares the message extension for you and opens it in VS Code in the browser. The Teams Toolkit icon appears in the activity bar of VS Code.

+ > When you build your app, GitHub Codespaces loads it to the Teams client in a new tab. If your browser blocks pop-up tabs or windows, you'll need to allow pop-ups for your app to open.

+ GitHub Codespaces builds your message extension app, loads it to Teams client, and opens in a separate browser tab.

+If you want to learn how to start a project with Teams Toolkit from the beginning, you'll need to set up your development environment. Select the following button to start building your message extension app.

+If a bot is what you are interested in, select the following:

+If you want to build basic tab app, select the following:

+The notification bot proactively sends messages in a Teams channel, group chat, or personal chat. You can trigger the notification bot with an HTTP request, such as cards or texts.

+In this tutorial, you'll learn about a notification bot app in one of the following ways.

+* **GitHub Codespaces**: The codespace instance allows you to experience a Teams app instantaneously. It opens Visual Studio Code (VS Code) where the Teams Toolkit extension, the app source code, and all the dependencies are pre-packaged for you.

+* **Step-by-step guide**: Allows you to set up your development environment and build a Teams app from the start.

+Before you create your codespace, ensure that you have the following prerequisites:

+* A GitHub account to create your codespace instance

+* A [Microsoft 365 account](https://developer.microsoft.com/microsoft-365/dev-program) with sideloading permission

+>

+> [GitHub Codespaces](https://github.com/features/codespaces) offers a free plan with a fixed amount of usage per month. If you need to free up more space, go to [github.com/codespaces](https://github.com/codespaces) and delete the codespace that you no longer need.

+To create a Teams notification bot with GitHub Codespaces, follow these steps:

+ You might be asked to sign in to GitHub account if you haven't already.

+ :::image type="content" source="../assets/images/get-started/codespace.png" alt-text="Screenshot shows you the GitHub page to create a codespace for bot.":::

+ Teams Toolkit prepares the notification bot project for you and opens it in VS Code in the browser. The Teams Toolkit icon appears in the activity bar of VS Code.

+ > When you build your app, GitHub Codespaces loads it to the Teams client in a new tab. If your browser blocks pop-up tabs or windows, you'll need to allow pop-ups for your app to open.

+ GitHub Codespaces builds your notification bot app, loads it to Teams client, and opens it in a separate browser tab.

+ > [!TIP]

+ >

+ > In real time, events are triggered by an external source, such as a third-party API that cause the notification bot to send the user a notification. To emulate an event trigger, you can send an event manually via curl commands on terminal.

+ You've now successfully created the notification bot and loaded it in the Teams client.

+If you want to learn how to start a project with Teams Toolkit from the beginning, you'll need to set up your development environment. Select the following button to start building you notification bot.

+If you want to build a message extension, select the following:

+If you want to build basic tab app, select the following:

+You've built your first tab app, notification bot, and message extension. You can build a Teams app as per your app's requirements. Based on factors such as business needs, development environment, and domain knowledge, select the environment and tools to build your app.

+This section takes you through the various options for building your Teams app.

+You can use various tools and services to build your app. Following is an example development flow.

+To start building your Teams app, you can select the tools and SDKs based on your app requirements.

+1. **App capabilities**: You can choose a single or a combination of capabilities based on your app requirements.

+1. **SDKs you need**: For example, if you're building AI capability for your bot app, you select Teams AI library.

+1. **Recommended Tools**: Choose the tools based on the language that you've selected. You can also use the Teams Developer Portal to manage and publish your app. The Teams Toolkit allows you to build your app with JavaScript, TypeScript, or C# in Visual Studio Code (VS Code) or Visual Studio.

+|--|--|

+Get started with building apps for Microsoft Teams and beyond!

+Use GitHub Codespaces or walk through the step-by-step guide to build a basic, real-world Teams app. This module introduces you to common tools, fundamental concepts, and more advanced functionalities.

+In this section, learn how to build a Teams app with different capabilities, such as tab, scenario-based bot app, and message extension.

+ * **Build a basic Teams tab app**: Get started with building a Teams app with a basic tab app.

+ * **Build a scenario-based Teams bot app**: Build a Teams app that is suitable for a particular scenario or use-case. For example, a notification bot is suitable for sending notifications but not to chat.

+ * **Build message extension Teams app**: Build a search-based message extension Teams app.

+2. Choose your path to build your selected app.

+ * **GitHub Codespaces**: Allows you to run, test, and debug your app in a development environment without the need for any extra setup.

+ * **Step-by-step guide**: Allows you to create a Teams app from the ground up including setting up your development environment.

+ :::image type="content" border="false" source="../assets/images/get-started/codescpaces-vs-manual.png" alt-text="Your choices to build a Teams app with codespaces and step-by-step guide."lightbox="../assets/images/get-started/codescpaces-vs-manual.png":::

+If you want to build a basic tab app, select the following:

+If a bot is what you're interested in, select the following:

+If you want to build a message extension app, select the following:

+To start building your Teams app, use the following languages or frameworks and prepare your development environment.

+| [**Tabs-personal scope**](../tabs/how-to/create-personal-tab.md) |`staticTabs` | Web, Desktop, Mobile | Web, Desktop, Mobile (Android Beta*) | Web, Desktop, Mobile (Android)| *Rollout to Android current release in progress. Channel and group scope not yet supported for Microsoft 365. See [notes](../tabs/how-to/using-teams-client-sdk.md#microsoft-365-support-running-teams-apps-in-office-and-outlook).

+description: Configure additional permissions and scopes, get access token with Microsoft Graph to enable single sign-on (SSO).

+ :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/request-api-permission.png" alt-text="The screenshot shows the request API permissions page.":::

+ :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/add-platform.png" alt-text="The screenshot shows the options to add a platform.":::

+1. Use token cache serialization in MSAL.NET to cache the new access token for multiple, if necessary.

+>

+> - As a best practice for security, always use the [server-side code to make Microsoft Graph calls](/azure/active-directory/develop/v2-oauth2-on-behalf-of-flow#middle-tier-access-token-request) or other calls that require passing an access token. You must not return the OBO token to the client because it enables the client to make direct calls to Microsoft Graph. This helps protect the token from being intercepted or leaked.

+>

+> - DonΓÇÖt use `notifySuccess` result to return the token information to the parent page. Use `localStorage` to save the token and pass the item key via `notifySuccess`.

+1. Tenant admin consent: A simple way of [consenting on behalf of an organization as a tenant admin](/azure/active-directory/manage-apps/consent-and-permissions-overview#admin-consent) is by getting [consent from admin](/azure/active-directory/manage-apps/grant-admin-consent).

+ You can ask for consent using the Auth API. Another approach for getting Graph scopes is to present a consent dialog using our existing [third party OAuth provider authentication approach](~/tabs/how-to/authentication/auth-tab-aad.md#navigate-to-the-authorization-page-from-your-pop-up-page). This approach involves popping up an Azure AD consent dialog box.

+ <details>

+ <summary>To ask for additional consent using the Auth API, follow these steps:</summary>

+ 1. The token retrieved using `getAuthToken()` must be exchanged on the server-side using Azure AD [on-behalf-of flow](/azure/active-directory/develop/v2-oauth2-on-behalf-of-flow) to get access to those other Graph APIs. Ensure you use the v2 Graph endpoint for this exchange.

+ 2. If the exchange fails, Azure AD returns an invalid grant exception. It usually responds with one of the two error messages, `invalid_grant` or `interaction_required`.

+ 3. When the exchange fails, you must ask for consent. Use the user interface (UI) to ask the app user to grant other consent. This UI must include a button that triggers an Azure AD consent dialog using [Silent authentication](~/concepts/authentication/auth-silent-aad.md).

+ 4. When asking for more consent from Azure AD, you must include `prompt=consent` in your [query-string-parameter](~/tabs/how-to/authentication/auth-silent-aad.md#get-the-user-context) to Azure AD, otherwise Azure AD wouldn't ask for other scopes.

+ - Instead of `?scope={scopes}`, use `?prompt=consent&scope={scopes}`

+ - Ensure that `{scopes}` includes all the scopes you're prompting the user for, for example, `Mail.Read` or `User.Read`.

+ To handle incremental consent for tab app, see [incremental and dynamic user consent](/azure/active-directory/develop/v2-permissions-and-consent).

+ 5. After the app user has granted more permissions, retry the OBO flow to get access to these other APIs.

+1. Race condition in fetching Graph access token via on-behalf-of (OBO) flow after consent: If your app calls Microsoft Graph, you might use the on-behalf-of (OBO) flow in your API to get a valid Graph token for that user.

+ If a user hasn't granted Azure AD application consent for these scopes, your OBO call will fail with `invalid_grant` or `interaction_required` error. This error informs you that you need to prompt the user for their consent.

+ When the user has provided their consent and you try to make an OBO call immediately, sometimes there's a race condition between Azure AD propagating this consent and the OBO request taking place. This can lead to OBO call failing with the same `invalid_grant` or `interaction_required` errors.

+ If your application is unaware of this behaviour, it might ask the user for consent multiple times.

+ There's no workaround to this limitation. Azure AD recommends that you can build a meaningful wait-and-retry mechanism to overcome this issue.

+ This wait-and-retry mechanism should keep track if a user has consented to the required scopes. If an API call that includes an OBO request fails with the above errors, but the user has already consented, avoid showing the consent prompt to the user. Instead, wait for some time before retrying the API call. Usually, Azure AD sends the consent within three to five seconds. In one of our [sample applications](https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/8f266c33608d6d7b4cf89c81779ccf49e7664c1e/samples/bot-tab-conversations/csharp/Source/ConversationalTabs.Web/ClientApp/src/utils/UtilsFunctions.ts#LL8C1-L8C1), we retry up to three times with double the wait time between each retry, starting at a one second wait.

+ If after three to five attempts the OBO flow still fails, the user might not have consented to all the required scopes, and you may have to prompt them to consent again.

+ This approach helps reduce the possibility of user being prompted for consent more than once.