OAuth is working!

Author: ryan-haskell

elm-land.json

@@ -15,7 +15,7 @@
         "html": { "lang": "en" },
         "head": {}
       },
-      "title": "Elm Land",
+      "title": "Jangle",
       "meta": [
         { "charset": "UTF-8" },
         { "http-equiv": "X-UA-Compatible", "content": "IE=edge" },

src/Auth.elm

@@ -6,6 +6,7 @@ import Dict
 import Route exposing (Route)
 import Route.Path
 import Shared
+import Shared.Model
 import View exposing (View)
 
 
@@ -18,10 +19,16 @@ type alias User =
 onPageLoad : Shared.Model -> Route () -> Auth.Action.Action User
 onPageLoad shared route =
     case shared.user of
-        Just user ->
+        Auth.User.SignedIn user ->
             Auth.Action.loadPageWithUser user
 
-        Nothing ->
+        Auth.User.FetchingUserDetails response ->
+            Auth.Action.showLoadingPage
+                { title = "Signing in..."
+                , body = []
+                }
+
+        Auth.User.NotSignedIn ->
             Auth.Action.pushRoute
                 { path = Route.Path.SignIn
                 , query = Dict.empty
@@ -33,4 +40,6 @@ onPageLoad shared route =
 -}
 viewLoadingPage : Shared.Model -> Route () -> View Never
 viewLoadingPage shared route =
-    View.fromString "Loading..."
+    { title = "Signing in..."
+    , body = []
+    }

src/Auth/User.elm

@@ -1,8 +1,20 @@
-module Auth.User exposing (User)
+module Auth.User exposing (SignInStatus(..), User)
+
+import Supabase.OAuthResponse
+
+
+type SignInStatus
+    = NotSignedIn
+    | FetchingUserDetails Supabase.OAuthResponse.OAuthResponse
+    | SignedIn User
 
 
 type alias User =
-    { name : String
+    { id : String
+    , name : String
     , email : String
     , image : Maybe String
+    , supabaseToken : String
+    , githubToken : Maybe String
+    , githubUsername : Maybe String
     }

src/Effect.elm

@@ -1,9 +1,11 @@
-module Effect exposing
+port module Effect exposing
     ( Effect
     , none, batch
     , sendCmd, sendMsg
     , pushRoute, replaceRoute, loadExternalUrl
     , map, toCmd
+    , saveOAuthResponse
+    , fetchSupabaseUser
     )
 
 {-|
@@ -15,14 +17,25 @@ module Effect exposing
 
 @docs map, toCmd
 
+
+## Custom effects
+
+@docs saveOAuthResponse
+@docs fetchSupabaseUser
+
 -}
 
+import Auth.User
 import Browser.Navigation
 import Dict exposing (Dict)
+import Json.Encode
 import Route exposing (Route)
 import Route.Path
 import Shared.Model
 import Shared.Msg
+import Supabase.Auth
+import Supabase.Context
+import Supabase.OAuthResponse
 import Task
 import Url exposing (Url)
 
@@ -38,6 +51,13 @@ type Effect msg
     | LoadExternalUrl String
       -- SHARED
     | SendSharedMsg Shared.Msg.Msg
+      -- LOCAL STORAGE
+    | Save
+        { key : String
+        , value : Json.Encode.Value
+        }
+      -- SUPABASE
+    | Supabase SupabaseRequest
 
 
 
@@ -111,6 +131,31 @@ loadExternalUrl =
 
 
 
+-- LOCAL STORAGE
+
+
+saveOAuthResponse : Supabase.OAuthResponse.OAuthResponse -> Effect msg
+saveOAuthResponse oauthResponse =
+    Save
+        { key = "oAuthResponse"
+        , value = Supabase.OAuthResponse.encode oauthResponse
+        }
+
+
+
+-- SUPABASE
+
+
+type SupabaseRequest
+    = FetchSupabaseUser
+
+
+fetchSupabaseUser : Effect msg
+fetchSupabaseUser =
+    Supabase FetchSupabaseUser
+
+
+
 -- INTERNALS
 
 
@@ -141,6 +186,12 @@ map fn effect =
         SendSharedMsg sharedMsg ->
             SendSharedMsg sharedMsg
 
+        Supabase request ->
+            Supabase request
+
+        Save data ->
+            Save data
+
 
 {-| Elm Land depends on this function to perform your effects.
 -}
@@ -177,3 +228,63 @@ toCmd options effect =
         SendSharedMsg sharedMsg ->
             Task.succeed sharedMsg
                 |> Task.perform options.fromSharedMsg
+
+        Save { key, value } ->
+            outgoing
+                { tag = "SAVE"
+                , data =
+                    Json.Encode.object
+                        [ ( "key", Json.Encode.string key )
+                        , ( "value", value )
+                        ]
+                }
+
+        Supabase request ->
+            let
+                userToken : Maybe String
+                userToken =
+                    case options.shared.user of
+                        Auth.User.NotSignedIn ->
+                            Nothing
+
+                        Auth.User.FetchingUserDetails oAuthResponse ->
+                            Just oAuthResponse.accessToken
+
+                        Auth.User.SignedIn user ->
+                            Just user.supabaseToken
+
+                context : Supabase.Context.Context
+                context =
+                    Supabase.Context.create
+                        { apiKey = options.shared.supabase.apiKey
+                        , url = options.shared.supabase.url
+                        }
+                        |> withUserToken
+
+                withUserToken :
+                    Supabase.Context.Context
+                    -> Supabase.Context.Context
+                withUserToken context_ =
+                    case userToken of
+                        Just token ->
+                            context_
+                                |> Supabase.Context.withUserToken token
+
+                        Nothing ->
+                            context_
+            in
+            case request of
+                FetchSupabaseUser ->
+                    Supabase.Auth.getUserData
+                        { onResponse =
+                            Shared.Msg.SupabaseUserApiResponded
+                                >> options.fromSharedMsg
+                        }
+                        context
+
+
+port outgoing :
+    { tag : String
+    , data : Json.Encode.Value
+    }
+    -> Cmd msg

src/Pages/Home_.elm

@@ -88,7 +88,7 @@ subscriptions model =
 
 view : Path -> Model -> View Msg
 view path model =
-    { title = "Homepage"
+    { title = "Jangle | Dashboard"
     , body =
         [ div [ Css.col, Css.pad_32, Css.gap_16, Css.align_left ]
             [ h1 [ Css.font_h1 ] [ text ("Counter: " ++ String.fromInt model.counter) ]

src/Pages/NotFound_.elm

@@ -1,5 +1,6 @@
 module Pages.NotFound_ exposing (Model, Msg, page)
 
+import Css
 import Effect exposing (Effect)
 import Html exposing (..)
 import Page exposing (Page)
@@ -66,4 +67,10 @@ subscriptions model =
 
 view : Model -> View Msg
 view model =
-    View.fromString "Page not found"
+    { title = "Jangle | 404"
+    , body =
+        [ div [ Css.row, Css.h_fill, Css.align_center ]
+            [ text "Page not found"
+            ]
+        ]
+    }

src/Pages/Projects/ProjectId_/Content/TypeId_.elm

@@ -79,9 +79,12 @@ subscriptions model =
 -- VIEW
 
 
-view : Route any -> Model -> View Msg
+view :
+    Route { projectId : String, typeId : String }
+    -> Model
+    -> View Msg
 view route model =
-    { title = "Pages.Projects.ProjectId_.Content.TypeId_"
+    { title = "Jangle | " ++ route.params.typeId
     , body =
         [ div [ Css.col, Css.pad_32, Css.gap_16, Css.align_left ]
             [ text "Hello from the content page!"

src/Pages/SignIn.elm

@@ -1,9 +1,13 @@
 module Pages.SignIn exposing (Model, Msg, page)
 
+import Components.Button
+import Components.Icon
+import Components.JangleLogo
+import Css
 import Effect exposing (Effect)
-import Route exposing (Route)
-import Html
+import Html exposing (..)
 import Page exposing (Page)
+import Route exposing (Route)
 import Shared
 import View exposing (View)
 
@@ -14,7 +18,7 @@ page shared route =
         { init = init
         , update = update
         , subscriptions = subscriptions
-        , view = view
+        , view = view shared
         }
 
 
@@ -38,13 +42,13 @@ init () =
 
 
 type Msg
-    = ExampleMsgReplaceMe
+    = UserClickedSignIn
 
 
 update : Msg -> Model -> ( Model, Effect Msg )
 update msg model =
     case msg of
-        ExampleMsgReplaceMe ->
+        UserClickedSignIn ->
             ( model
             , Effect.none
             )
@@ -63,8 +67,22 @@ subscriptions model =
 -- VIEW
 
 
-view : Model -> View Msg
-view model =
-    { title = "Pages.SignIn"
-    , body = [ Html.text "/sign-in" ]
+view : Shared.Model -> Model -> View Msg
+view shared model =
+    let
+        gitHubOAuthUrl : String
+        gitHubOAuthUrl =
+            shared.supabase.url ++ "/auth/v1/authorize?provider=github"
+    in
+    { title = "Jangle | Sign in"
+    , body =
+        [ div [ Css.h_fill, Css.col, Css.align_center, Css.gap_16 ]
+            [ Components.JangleLogo.viewLarge
+            , Components.Button.new { label = "Sign in with GitHub" }
+                |> Components.Button.withStyleSecondary
+                |> Components.Button.withIcon Components.Icon.GitHub
+                |> Components.Button.withHref gitHubOAuthUrl
+                |> Components.Button.view
+            ]
+        ]
     }