diff --git a/docs/_partials/icons/flutter.mdx b/docs/_partials/icons/flutter.mdx new file mode 100644 index 0000000000..2a13096b22 --- /dev/null +++ b/docs/_partials/icons/flutter.mdx @@ -0,0 +1,17 @@ + + {/* Primary kite shape */} + + + + {/* Inner lighter facet */} + + + + {/* Darker right-hand facet */} + + + + {/* Top accent */} + + + diff --git a/docs/index.mdx b/docs/index.mdx index 030cf52c3d..bcd5f490be 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -65,6 +65,12 @@ Find all the guides and resources you need to develop with Clerk. --- + - [Flutter (beta)](/docs/quickstarts/flutter) + - Use Clerk with Flutter to authenticate users in your Flutter application. + - + + --- + - [iOS](/docs/quickstarts/ios) - Use the Clerk iOS SDK to authenticate users in your native Apple applications. - diff --git a/docs/manifest.json b/docs/manifest.json index f90f2d40a4..058dfe77bf 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -342,6 +342,30 @@ ] ] }, + { + "title": "Flutter", + "hideTitle": true, + "sdk": ["flutter"], + "items": [ + [ + { + "title": "Getting started", + "items": [ + [ + { + "title": "Set up your Clerk account", + "href": "/docs/quickstarts/setup-clerk" + }, + { + "title": "Quickstart", + "href": "/docs/quickstarts/flutter" + } + ] + ] + } + ] + ] + }, { "title": "Go", "hideTitle": true, diff --git a/docs/manifest.schema.json b/docs/manifest.schema.json index 75c3b14d2b..d01ccc8a26 100644 --- a/docs/manifest.schema.json +++ b/docs/manifest.schema.json @@ -124,6 +124,7 @@ "door", "elysia", "expressjs", + "flutter", "globe", "go", "home", @@ -182,7 +183,8 @@ "python", "js-backend", "sdk-development", - "community-sdk" + "community-sdk", + "flutter" ] } } diff --git a/docs/quickstarts/flutter.mdx b/docs/quickstarts/flutter.mdx new file mode 100644 index 0000000000..7a8bf57746 --- /dev/null +++ b/docs/quickstarts/flutter.mdx @@ -0,0 +1,80 @@ +--- +title: Flutter Quickstart (beta) +description: Add authentication and user management to your Flutter app with Clerk. +--- + +> [!WARNING] +> The Flutter SDK is currently in beta. **It is not yet recommended for production use**. + + + + + + + ## Create an Flutter project + + To get started using Clerk with Flutter, create a new empty Flutter project using the `flutter` CLI or your favorite IDE Flutter extension. + + ## Install the Clerk Flutter SDK + + The Clerk Flutter SDK is distributed via pub.dev. To add the Clerk Flutter SDK to your project run `flutter pub add clerk_flutter` or manuall add `clerk_flutter` to your pubspec.yaml and run `flutter pub get` + + ## Configure Clerk + + - Import Clerk + - Wrap your app in the ClerkAuth widget and supply your publishable key to the ClerkAuthConfig widget. + - Use the ClerkErrorListener widget to catch Clerk errors + - Use the ClerkAuthBuilder widget to conditionally render content + - Use the ClerkAuthentication prebuilt UI widget to have users sign in and up + - Use the ClerkUserButton prebuilt UI widget to allow logged in users to manage their account + + ```dart {{ filename: 'lib/main.dart' }} + import 'package:flutter/material.dart'; + import 'package:clerk_flutter/clerk_flutter.dart'; + + void main() { + runApp(const MainApp()); + } + + class MainApp extends StatelessWidget { + const MainApp({super.key}); + + @override + Widget build(BuildContext context) { + return ClerkAuth( + config: ClerkAuthConfig(publishableKey: 'pk_test...'), + child: MaterialApp( + theme: ThemeData.light(), + debugShowCheckedModeBanner: false, + home: Scaffold( + body: SafeArea( + child: ClerkErrorListener( + child: ClerkAuthBuilder( + signedInBuilder: (context, authState) { + return const ClerkUserButton(); + }, + signedOutBuilder: (context, authState) { + return const ClerkAuthentication(); + }, + ), + ), + ), + ), + ), + ); + } + } + ``` + + ## Create your first user + + Run your project using `flutter run` or your favorite IDE. Click "Sign up" and authenticate to create your first user. + diff --git a/docs/quickstarts/overview.mdx b/docs/quickstarts/overview.mdx index 28d31de4b1..66d121992e 100644 --- a/docs/quickstarts/overview.mdx +++ b/docs/quickstarts/overview.mdx @@ -62,6 +62,12 @@ description: See the getting started guides and tutorials. --- + - [Flutter (beta)](/docs/quickstarts/flutter) + - Use Clerk with Flutter to authenticate users in your Flutter application. + - + + --- + - [iOS](/docs/quickstarts/ios) - Use the Clerk iOS SDK to authenticate users in your native Apple applications. - diff --git a/scripts/lib/schemas.ts b/scripts/lib/schemas.ts index 6de7348ad6..c951c64e9e 100644 --- a/scripts/lib/schemas.ts +++ b/scripts/lib/schemas.ts @@ -25,6 +25,7 @@ export const VALID_SDKS = [ 'js-backend', 'sdk-development', 'community-sdk', + 'flutter', ] as const export type SDK = (typeof VALID_SDKS)[number]