Skip to content

Commit

Permalink
Merge pull request #530 from Web3Auth/update-flutter-v3-1-0
Browse files Browse the repository at this point in the history 
Update Flutter SDK docs as per v3.1.0
  • Loading branch information
@shahbaz17
shahbaz17 authored Nov 9, 2023
2 parents a8b54a5 + 2749aaa commit 5f72bed
Show file tree
Hide file tree
Showing 11 changed files with 437 additions and 127 deletions.
78 changes: 68 additions & 10 deletions docs/sdk/pnp/flutter/custom-authentication.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,16 @@ Future<void> initPlatformState() async {
network: Network.testnet,
redirectUrl: redirectUrl,
whiteLabel: WhiteLabelData(
dark: true, name: "Web3Auth Flutter App", theme: themeMap),
appName: "Web3Auth Flutter App",
logoLight:
"https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg",
logoDark:
"https://cdn.icon-icons.com/icons2/2389/PNG/512/flutter_logo_icon_145273.png",
defaultLanguage: Language.en,
mode: ThemeModes.auto,
appUrl: "https://web3auth.io",
useLogoLoader: true,
theme: themeMap),
// highlight-next-line
loginConfig: loginConfig
));
Expand Down Expand Up @@ -234,7 +243,16 @@ Future<void> initPlatformState() async {
network: Network.testnet,
redirectUrl: redirectUrl,
whiteLabel: WhiteLabelData(
dark: true, name: "Web3Auth Flutter App", theme: themeMap),
appName: "Web3Auth Flutter App",
logoLight:
"https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg",
logoDark:
"https://cdn.icon-icons.com/icons2/2389/PNG/512/flutter_logo_icon_145273.png",
defaultLanguage: Language.en,
mode: ThemeModes.auto,
appUrl: "https://web3auth.io",
useLogoLoader: true,
theme: themeMap),
// highlight-next-line
loginConfig: loginConfig
));
Expand Down Expand Up @@ -281,7 +299,16 @@ Future<void> initPlatformState() async {
network: Network.testnet,
redirectUrl: redirectUrl,
whiteLabel: WhiteLabelData(
dark: true, name: "Web3Auth Flutter App", theme: themeMap),
appName: "Web3Auth Flutter App",
logoLight:
"https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg",
logoDark:
"https://cdn.icon-icons.com/icons2/2389/PNG/512/flutter_logo_icon_145273.png",
defaultLanguage: Language.en,
mode: ThemeModes.auto,
appUrl: "https://web3auth.io",
useLogoLoader: true,
theme: themeMap),
// highlight-next-line
loginConfig: loginConfig
));
Expand All @@ -293,7 +320,7 @@ final Web3AuthResponse response = await Web3AuthFlutter.login(
// highlight-start
loginProvider: Provider.jwt,
extraLoginOptions: ExtraLoginOptions(
id_token: "{YOUR_JWT_TOKEN}"
id_token: "YOUR_JWT_TOKEN"
)
// highlight-end
)
Expand Down Expand Up @@ -444,7 +471,16 @@ Future<void> initPlatformState() async {
network: Network.testnet,
redirectUrl: redirectUrl,
whiteLabel: WhiteLabelData(
dark: true, name: "Web3Auth Flutter App", theme: themeMap),
appName: "Web3Auth Flutter App",
logoLight:
"https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg",
logoDark:
"https://cdn.icon-icons.com/icons2/2389/PNG/512/flutter_logo_icon_145273.png",
defaultLanguage: Language.en,
mode: ThemeModes.auto,
appUrl: "https://web3auth.io",
useLogoLoader: true,
theme: themeMap),
// highlight-next-line
loginConfig: loginConfig
));
Expand All @@ -456,7 +492,7 @@ final Web3AuthResponse response = await Web3AuthFlutter.login(
// highlight-start
loginProvider: Provider.jwt,
extraLoginOptions: ExtraLoginOptions(
domain: "https://username.us.auth0.com", // domain of your auth0 app
domain: "https://tenant-name.us.auth0.com", // domain of your auth0 app
verifierIdField: "sub", // The field in jwt token which maps to verifier id.
)
// highlight-end
Expand Down Expand Up @@ -498,7 +534,16 @@ Future<void> initPlatformState() async {
network: Network.testnet,
redirectUrl: redirectUrl,
whiteLabel: WhiteLabelData(
dark: true, name: "Web3Auth Flutter App", theme: themeMap),
appName: "Web3Auth Flutter App",
logoLight:
"https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg",
logoDark:
"https://cdn.icon-icons.com/icons2/2389/PNG/512/flutter_logo_icon_145273.png",
defaultLanguage: Language.en,
mode: ThemeModes.auto,
appUrl: "https://web3auth.io",
useLogoLoader: true,
theme: themeMap),
// highlight-next-line
loginConfig: loginConfig
));
Expand All @@ -519,13 +564,17 @@ final Web3AuthResponse response = await Web3AuthFlutter.login(

### Email Passwordless

To use the `EMAIL_PASSWORDLESS` login, you need to put the email into the `login_hint` field of the `extraLoginOptions`.
To use the `EMAIL_PASSWORDLESS` login, you need to put the email into the `login_hint` field of the `extraLoginOptions`. By default, the login flow
will be `code` flow, if you want to use the `link` flow, you need to put `flow_type` into the `additionalParams` field of the `extraLoginOptions`.

```kotlin
Future<void> initPlatformState() async {
final themeMap = HashMap<String, String>();
themeMap['primary'] = "#229954";

final additionalParams = HashMap<String, String>();
additionalParams['flow_type'] = "link"; // default is 'code'

Uri redirectUrl;
if (Platform.isAndroid) {
redirectUrl = Uri.parse('{SCHEME}://{HOST}/auth');
Expand All @@ -542,13 +591,22 @@ Future<void> initPlatformState() async {
network: Network.testnet,
redirectUrl: redirectUrl,
whiteLabel: WhiteLabelData(
dark: true, name: "Web3Auth Flutter App", theme: themeMap),
appName: "Web3Auth Flutter App",
logoLight:
"https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg",
logoDark:
"https://cdn.icon-icons.com/icons2/2389/PNG/512/flutter_logo_icon_145273.png",
defaultLanguage: Language.en,
mode: ThemeModes.auto,
appUrl: "https://web3auth.io",
useLogoLoader: true,
theme: themeMap),
));
}

// Login
final Web3AuthResponse response = await Web3AuthFlutter.login(
LoginParams(loginProvider: Provider.email_passwordless,
// highlight-next-line
extraLoginOptions: ExtraLoginOptions(login_hint: "[email protected]")));
extraLoginOptions: ExtraLoginOptions(login_hint: "[email protected]", additionalParams: additionalParams)));
```
31 changes: 20 additions & 11 deletions docs/sdk/pnp/flutter/dapp-share.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ import FlutterResponse from "@site/src/common/sdk/pnp/_userinfo_response.mdx";

## Web3Auth Infrastructure at a glance

If you go through the [Web3Auth infrastructure](/infrastructure/) you'll notice that to enable the non custodiality of Web3Auth, we
split the private key into multiple parts, ie. `shares`. These shares are a part of the off chain multisig, where multiple shares are stored in
different places and can be used to reconstruct the private key dynamically in the user's frontend application. For a glance at the structure of the
shares, these are the following:
If you go through the [Web3Auth infrastructure](/infrastructure/) you'll notice that to enable the non custodiality of Web3Auth, we split the private
key into multiple parts, ie. `shares`. These shares are a part of the off chain multisig, where multiple shares are stored in different places and can
be used to reconstruct the private key dynamically in the user's frontend application. For a glance at the structure of the shares, these are the
following:

1. **`ShareA` is managed by a login service via node operators**: This share is further split amongst a network of nodes and retrieved via
conventional authentication flows.
Expand All @@ -26,13 +26,13 @@ initial setup provides several benefits.

## The User Experience in Mobile Platforms

The user experience in mobile platforms is very different from the web platforms. This is because the user has to be redirected to a browser where
The user experience on mobile platforms is very different from the web platforms. This is because the user has to be redirected to a browser where
they can login using their socials and then back to the app once they have been successfully authenticated. This user experience shifts the context
between two applications, whereas in the web platforms, the context remains within the browser only.
between two applications, whereas, in the web platforms, the context remains within the browser only.

For the seamless login flow, we need to reconstruct the Shares `A` and `B`. `Share B` is managed by the login service and is provided on successful
authentication. Whereas in web platforms, `Share A` is stored in the browser context. We can still store it in the browser context for mobile devices,
but this has a few risks, like user accidently deleting browser data. This is a bigger problem in mobile devices since the user doesn't realise that
but this has a few risks like users accidentally deleting browser data. This is a bigger problem in mobile devices since the user doesn't realize that
the browser is being used to login within the app and clearing the browser data can cause their logins to fail. Hence, to tackle this issue, Web3Auth
issues a dApp Share, ie. a backup share that can be stored by the app developer directly within their application and used to reconstruct the private
key after successful login by the user.
Expand All @@ -42,18 +42,18 @@ key after successful login by the user.
Web3Auth issues a dApp Share, ie. a backup share that can be stored by the app developer directly within their application and used to reconstruct the
private key after successful login by the user.

After a successful login from a user, the user details are returned as a response to the application in mobile devices.
After a successful login from a user, the user details are returned as a response to the application on mobile devices.

#### Sample Response in Flutter

<FlutterResponse />

If you notice, the reponses has a field called `dappShare` which is a 24 words seed phrase that can be used to reconstruct the private key. This
dappShare is a suplement to the `Share A` and represents half of the private key. The application can store the dApp share in their own application
dappShare is a supplement to the `Share A` and represents half of the private key. The application can store the dApp share in its own application's
local storage safely.

Now, while logging in, the user can use their social accounts to obtain one share, and the application provides the dApp Share, removing the need to
store the share in the browser context and enabling user to login seamlessly. This can be done by passing over the stored dApp share value in the
store the share in the browser context and enabling the user to login seamlessly. This can be done by passing over the stored dApp share value in the
login function.

:::note
Expand Down Expand Up @@ -95,7 +95,16 @@ Future<void> initPlatformState() async {
network: Network.testnet,
redirectUrl: redirectUrl,
whiteLabel: WhiteLabelData(
dark: true, name: "Web3Auth Flutter App", theme: themeMap)
appName: "Web3Auth Flutter App",
logoLight:
"https://www.vectorlogo.zone/logos/flutterio/flutterio-icon.svg",
logoDark:
"https://cdn.icon-icons.com/icons2/2389/PNG/512/flutter_logo_icon_145273.png",
defaultLanguage: Language.en,
mode: ThemeModes.auto,
appUrl: "https://web3auth.io",
useLogoLoader: true,
theme: themeMap)
));
}
Expand Down
2 changes: 1 addition & 1 deletion docs/sdk/pnp/flutter/flutter.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Web3Auth provides a [Flutter SDK](https://github.com/Web3Auth/web3auth-flutter-s
Flutter app to authenticate users using Web3Auth. It returns a private key generated in a non-custodial way on successful user authentication. This
authentication is achieved by using any of the supported social logins Web3Auth provides or using a custom authentication flow of your choice.

#### This Documentation is based on the `2.0.3` SDK Version.
#### This Documentation is based on the `3.1.0` SDK Version.

## Requirements

Expand Down
Loading

1 comment on commit 5f72bed

@vercel
Copy link

@vercel vercel bot commented on 5f72bed Nov 9, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

web3auth-docs – ./

w3a-docs.vercel.app
web3auth-docs-git-master-web3auth.vercel.app
web3auth-docs-web3auth.vercel.app

Please sign in to comment.